vercel / next-plugins Goto Github PK
View Code? Open in Web Editor NEWOfficial Next.js plugins
License: MIT License
Official Next.js plugins
License: MIT License
I need to use @zeit/next-css
and @zeit/next-sass
at the same time, but this is failing by just using module.exports = withCSS(withSass(...))
as only one type gets compiled.
I'm trying to provide a simple example including the result map to get the issue resolved. I'm referencing to the issues
#34
#69
#58
vercel/next.js#3852
This is a simple example what I'm doing and what the result looks like.
static/styles/style.css
#content {
font-size: 3rem
}
static/styles/style.sass
#title
font-size: 1rem
next.config.js
const withCSS = require('@zeit/next-css')
const withSass = require('@zeit/next-sass')
module.exports = withCSS(withSass({
webpack: (config) => {
return config
}
}))
components/Header.js
import Head from 'next/head'
import '/static/styles/style.css'
import '/static/styles/style.sass'
export const Header = props => {
return (
<Head>
<meta httpEquiv='content-type' content='text/html;charset=UTF-8' />
<meta charSet='utf-8' />
<title>Title</title>
<link rel='stylesheet' href='/_next/static/style.css' />
</Head>
)
}
The result /.next/static/style.css
content is only:
#content {
font-size: 1rem
}
/*# sourceMappingURL=style.css.map*/
I'm missing the compiled sass file.
If I switch next.config.js to withSass(withCSS({..}))
the result is only:
#title {
font-size: 3rem; }
/*# sourceMappingURL=style.css.map*/
The map for the last one is:
{"version":3,"sources":["/Users/project/static/styles/style.sass"],"names":[],"mappings":"AAAA;EACE,gBAAgB,EAAE","file":"static/style.css","sourcesContent":["#title {\n font-size: 3rem; }\n\n\n\n// WEBPACK FOOTER //\n// ./static/styles/style.sass"],"sourceRoot":""}
I noticed when running in dev mode, only the css files referenced from _document.js
& _error.js
are being processed into the static/style.css
file.
I'm guessing it's because of this line here: https://github.com/zeit/next.js/blob/canary/server/build/webpack/utils.js#L17
It seems like those are the only two entry files when running in dev
mode. How does webpack know about the active pages in dev? I'm assuming it's something with HMR, but I'm missing the connection there.
It's also possible it has something to do with how I'm using the next.config.js
. Here's my next config:
const path = require("path")
const fs = require("fs")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
assetPrefix: process.env.ASSET_HOST || "",
distDir: "build",
webpack: (config, { dev, isServer }) => {
config.devtool = dev ? "cheap-module-inline-source-map" : "hidden-source-map"
if (isServer) {
config.module.rules.push(
{
test: /\.css$/,
use: [
{
loader: "emit-file-loader",
options: {
name: "dist/[path][name].[ext]",
},
},
{
loader: "skeleton-loader",
options: {
procedure() {
const fileName = `${this._module.userRequest}.json`
const classNames = fs.readFileSync(fileName, "utf8")
return `module.exports = ${classNames}`
},
},
},
"postcss-loader",
],
},
)
}
if (!isServer) {
config.module.rules.push({
test: /\.css$/,
include: path.join(__dirname, "styles"), /* Local Files */
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
importLoaders: 1,
localIdentName: "[local]",
minimize: !dev,
modules: true,
},
},
"postcss-loader",
],
}),
})
config.module.rules.push({
test: /\.css$/,
exclude: path.join(__dirname, "styles"), /* Vendor files */
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
importLoaders: 1,
minimize: !dev,
modules: false,
},
},
],
}),
})
config.plugins.push(
new ExtractTextPlugin("static/styles.css", {
ignoreOrder: true,
}),
)
}
return config
},
}
I would assume anytime a .css
file is imported from the active pages in next, they're being ran through this webpack config, but that doesn't seem to be the case. Or maybe extract-text-plugin
isn't overriding the file when that happens?
Any ideas or help would be greatly appreciated, thanks!
Great work on Next.js 5.0!
I think that's a bug for next-less
I have make a test project, when I use "npm run dev", It worked well, but when I build it, is not worked,
the .next/static catalog has style.css
but the page can't find the css it‘s render like this " href="/_next/a270d480-e3ee-4ed7-a055-5434f0caa191/page/_error.js" "
I have make a test project : https://github.com/supeng911/next-less-test
I compile .ts
to .js
by tsc
with express server
@zeit/next-typescript
resolve the next command with typescript but server.ts from outside
For example
import * as next from "next";
const port = parseInt(process.env.PORT, 10) || 3000;
const app = next({dev: true});
app.prepare().then(() => {
server.listen(port, (err) => {
if (err) {
throw err;
}
console.log(`> Ready on http://localhost:${port}`);
};
Is possible to use @zeit/next-typescript
with custom server?
Images can be found in css files, will it be plugin for this
When running in production mode, only "shared" styles are included in the outputted stylesheet. See https://github.com/stephenmathieson/next-plugins-css-bug to reproduce.
I found in css-loader-config.js
fallback: {
loader: 'style-loader',
options: {
sourceMap: dev,
importLoaders: 1
}
}
but importLoaders
not available for style-loader #options
I think this issue might similar to #20
If I want to use a plugin, then I need to export on next.config.js
like this
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
cssModules: true,
webpack: (config) => {
return config
}
})
But, how to use it with 2 or more plugins?
As I read on #20, I can't use it like
module.exports = withCSS(withTypescript(withSass(...)))
Thanks
"target": "esnext",
"module": "esnext",
if tsconfig.json use above config that server part can't use import
so I setup like
"target": "es2015",
"module": "commonjs",
but When I use "async getInitialProps" that will show error
The default export is not a React Component in page: "/"
Error: The default export is not a React Component in page: "/"
at App.render (/Users/user/Sites/learning/Next5TsAsyncProblem/node_modules/next/dist/lib/app.js:100:15)
at resolve (/Users/user/Sites/learning/Next5TsAsyncProblem/node_modules/react-dom/cjs/react-dom-server.node.development.js:2149:18)
at ReactDOMServerRenderer.render (/Users/user/Sites/learning/Next5TsAsyncProblem/node_modules/react-dom/cjs/react-dom-server.node.development.js:2260:22)
at ReactDOMServerRenderer.read (/Users/user/Sites/learning/Next5TsAsyncProblem/node_modules/react-dom/cjs/react-dom-server.node.development.js:2234:19)
if remove async will be ok
how to fix this?
The example in this documentation points out to statically <link>
to the statically generated CSS file. However, when doing so this will also apply to dev environments, where this link may be 404 or has outdated CSS styles. Please demonstrate an example that only uses this static file reference for production.
I define an interface, then pass it to my Component as Props and/or State the interface doesn't really apply.
Because if I try to create a state variable diferrent from the interface it doesn't throw any error neither points the error out.
But if I implement a function (like someFunction()) with typed params and try to call it, VS Code will tell me it is wrong, but still tsc will not throw an error.
Check it out here:
import React from 'react';
interface ops {
a: number;
}
class Index extends React.Component<ops, ops> {
constructor(props: ops){
super(props);
//Should tell me there is no "b" in the state's type
this.state = {
b: 'olar'
}
}
someFunction(param1: string, param2: number){
return param1+param2.toString();
}
render(){
return(
<div>
{ this.someFunction(5, {attr: 'it is behaving as expected'}) }
</div>
);
}
}
export default Index;
My tsconfig.json file:
{
"compileOnSave": false,
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"jsx": "preserve",
"allowJs": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"removeComments": false,
"preserveConstEnums": true,
"sourceMap": true,
"skipLibCheck": true,
"baseUrl": ".",
"typeRoots": [
"./node_modules/@types"
],
"lib": [
"dom",
"es2015",
"es2016"
]
}
}
What am I doing wrong?
Should it be in off package?
code is very simple:
module.exports = plugins => ({
webpack(config, options) {
return plugins.reduce((config, plugin) => {
if (plugin instanceof Array) {
const [_plugin, ...args] = plugin
plugin = _plugin(...args)
}
if (plugin instanceof Function) {
plugin = plugin()
}
if (plugin && plugin.webpack instanceof Function) {
return plugin.webpack(config, options)
}
return config
}, config)
},
webpackDevMiddleware(config) {
return plugins.reduce((config, plugin) => {
if (plugin instanceof Array) {
const [_plugin, ...args] = plugin
plugin = _plugin(...args)
}
if (plugin instanceof Function) {
plugin = plugin()
}
if (plugin && plugin.webpackDevMiddleware instanceof Function) {
return plugin.webpackDevMiddleware(config)
}
return config
}, config)
}
})
and using like that:
const compose = require('@zeit/next-compose')
const withTs = require('@zeit/next-typescript')
const withSass = require('@zeit/next-sass')
module.exports = compose([
withTs,
[
withSass,
{ sassLoaderOptions: { includePaths: ['some/path/to/include'] } }
],
{
webpack(config, options) {
/** custom code */
return config
}
}
])
The https://github.com/zeit/next-plugins/tree/master/packages/next-bundle-analyzer#usage-with-environment-variables usage example references a yarn build
script but does not describe the script. Is it simply next build
? I've tried a few combinations of this and not been able to get any of the analyze results to show in a browser.
PS. I'm happy to PR an update to the docs, I just cannot before understanding it myself 😅
Hi there,
Is localIdentName
passable as an option to the webpack css loader? (It doesn't look like it from the code but I may be missing something).
We have a custom localIdentName
convention that allows our designers to pass back feedback to the dev team. I'd like to get that working in our Next.js
app.
I put together a PR in case this is something that doesn't exist but would be useful.
Hello i want use sass and typescript plugin on my project but i can't found multiple plugins usage example.
my next.config.js file is;
// next.config.js
const withSass = require('@zeit/next-sass')
const withTypescript = require('@zeit/next-typescript')
module.exports = withSass()
module.exports = withTypescript()
but doesn't work. Only working typescript because last export is typescript.
how i can merge two different plugin?
Thanks
Hello, thank you for awesome plugins !
I found a problem when using typescript and styled-jsx. If I set target of typescript to es5, I can not pass variables to styled-jsx.
import * as React from 'react'
const backgroundColor = '#eee'
export default () => (
<div className='hello'>
<p>Hello World</p>
<style jsx>{`
.hello {
background-color: ${backgroundColor}; // <--- ERROR !!
padding: 100px;
text-align: center;
transition: 100ms ease-in background;
}
`}</style>
</div>
)
If I set the target
of tsconfig.json
to es2015, this problem does not occur. However, if es5 is specified as target, the following error occurs.
Syntax Error: <style jsx>{`some css`}</style>), but got BinaryExpression
1 | import * as React from 'react';
2 | var backgroundColor = '#eee';
> 3 | export default (function () { return (<div className='hello'>
| ^
4 | <p>Hello World</p>
5 | <style jsx>{"\n .hello {\n background-color: " + backgroundColor + ";\n padding: 100px;\n text-align: center;\n transition: 100ms ease-in background;\n }\n "}</style>
6 | </div>); });
In addition, if I do not pass variables to styled-jsx, even if target is es5 it works fine.
The following is a summary of the reproduction code.
https://gist.github.com/monzou/10fb15080cfc746e5a0dea1ee15134bf
Is there a solution to this problem ?
Thanks.
I make all to process to install and then create a next.config.js exactly as described in README.md.
But it never throws errors when I pass props to a component that were not defined as its props' types.
Example:
Default.tsx
`interface Props {
uma: number;
duas: string;
}
export default (props: Props) => {
return(
index.tsx
`render(){
return(
It doesn't warn me neither throws an error when I execute "yarn run dev".
Why is that?
thanks!
I have multi pages. Each page has its own styles files included.
// pages/a.js
import "../styles/pageA.scss"
// pages/b.js
import "../styles/pageB.scss"
After building in production mode.
I got one file which stored at .next/static/style.css
All style of pageA.scss is missing. If I remove the import "../styles/pageB.scss"
statement, then build. I can see the style of page a.
Is the styles.css generated multi times, and the second replace the first one. So the style of page a is missing in the end.
What do you guys think of incorporating happy-pack for speed gains in some of these plugins. I can submit a PR / PRs
I'm not sure should that trouble be here or in nextjs
rep, but lets start from here and if will be need ed - move this.
Let's start:
In simple way we have file like that:
import React, {Component} from 'react'
import '/styles/base.scss'
import css from './Wrapper.scss'
import Head from 'next/head'
export function withWrapper(Child) {
class Wrapper extends Component {
static async getInitialProps(...args){
if (typeof Child.getInitialProps !== 'function') {
return {}
}
let initialProps = Child.getInitialProps(...args)
if (initialProps instanceof Promise) {
initialProps = await initialProps
}
return initialProps
}
render() {
return <div className={css.main}>
<Head>
<link rel="stylesheet" href="/_next/static/style.css"/>
</Head>
<Header/>
<div className={css.container}>
<Child {...this.props}/>
</div>
</div>
}
}
return Wrapper
}
export default withWrapper
I expect styles in file styles/base.css
will be at the top of style.css
. Bcs it's my vendor.
But now styles of Wrapper.scss
are at the top of the file style.css
. Even more, all the styles that are in the Child
component will get to the top of the file.
Looks like calling of components starts from the deepest one and all of styles adds with a push
, so in the end we got: styles of deepest child will be at top of styles.css
and style, what we expect to see at the top (vendor, normalize, etc...) appears at the bottom of file....
For myself I hacked it with spliting code in two files: vendor and app, but I think it is not the good way to solve that trouble.
Following the example repo the app renders briefly and then show up as undefined
. I've put together an example at: https://glitch.com/edit/#!/bustling-hook
It looks like it could be a problem loading the common.js module.
I am wanting to use (TS Transform Graphql)[https://github.com/firede/ts-transform-graphql-tag] with the @zeit/next-typescript package. When I install the @zeit/next-typescript package the plugin is not initialized. When I look at the node_modules/@zeit/next-typescript/index.js file I find line 31 contains
options: {
transpileOnly: true
}
Instead of:
options: Object.assign({}, {
transpileOnly: true
}, nextConfig.typescriptLoaderOptions)
Would it be possible to re-release to take advantage of the typescriptLoaderOptions option?
Note I am using yarn and did a full cache clean and re-install with no fix. Using "@zeit/next-typescript": "^0.0.9"
After updated to 0.1.1, it suddenly stop working, revert to 0.9 fixes the issue, please fix this
Def not an urgent bug or request, but would be chill to support page directories. Might even be a simple config I'm missing as well.
pages/
/index
index.tsx
Will yield a 404
pages/
/index.tsx
Works as expected. I'd expect nested page directories to work the same.
Now that Next.js has moved to a universal webpack solution, are we forced to put our JS compilation (eg: @zeit/next-typescript
) as a dependency instead of devDependency?
The next-typescript package installation section would indicate yes:
yarn add @zeit/next-typescript typescript
Is this correct thinking, or is the above a typo (missing -D
) and not required as a dep?
In this small repo I've illustrated next-css
not working with SSR, this is a blocker from my team moving off of https://github.com/traveloka/styled-modules which we're super eager to do.
Great work on Next.js 5.0! Can't wait to fully migrate to it :)
I would mind if Next.js apps had to have a custom _document.js
to support this, but I guess thats more of an implementation detail.
Hi @timneutkens
In production the stylesheet is compiled to .next/static/style.css. You have to include it into the page using either next/head or a custom _document.js. The file will be served from /_next/static/style.css
usually we will use hash code to clean browser cache if css file has any modification, like style.41d523.css
how can we do this on this plugin?
Hi, I'd like to use TypeScript with next-css
. For now I get this error:
This is my next.config.js
file.
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
cssModules: true,
webpack: (config, options) => {
const { dir, defaultLoaders } = options
// add TypeScript support
config.resolve.extensions.push('.ts', '.tsx')
config.module.rules.push({
test: /\.+(ts|tsx)$/,
include: [dir],
exclude: /node_modules/,
use: [
defaultLoaders.babel,
{ loader: 'ts-loader', options: { transpileOnly: true } }
]
})
return config
}
})
I get the same with module.exports = withCSS(withTypescript())
Am I doing something wrong?
Thanks,
Paul
How to add includePaths
to sass-loader?
Config:
// next.config.js
const withTypescript = require('@zeit/next-typescript');
module.exports = withTypescript({});
Page:
// pages/index.tsx
import React from 'react';
export default () => (<div>Foo</div>);
Outcome:
ERROR in ./pages/index.tsx
Module build failed: TypeError: Cannot set property 'tsLoaderFileVersion' of undefined
at successLoader (/xxx/node_modules/ts-loader/dist/index.js:47:54)
at Object.loader (/xxx/ts-loader/dist/index.js:21:12)
@ multi ./pages/index.tsx
When I use the module @zeit/next-less, my configuration in next.config.js
const withLess = require('@zeit/next-less')
module.exports = withLess({
cssModules: true
})
I use the example of with-next-css, and change style.css into style.less and even remove the file's content (had changed import '../style.css' in index.js to import '../style.less' ), the error is
Error in ../style.less
Module build failed: Error: Cannot find module 'less'
at Function.Module._resolveFilename (module.js:538:15)
at Function.Module._load (module.js:468:25)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (D:\work\wed\frontend-development\clone\with-next-css-app\node_modules\less-loader\dist\index.js:7:13)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (D:\work\wed\frontend-development\clone\with-next-css-app\node_modules\less-loader\dist\cjs.js:3:18)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
Is this due to my next-less configuration error?
@thekevinscott has done a wonderful job with pull request #16
However, there doesn't seem to be support for camelCase option of css-loader.
Would support for this be added soon?
Everything works fine for one-worded classnames like 'navbar', 'column', 'sticky' etc. However, for class names like 'navbar-bg', 'column-12', 'sticky-top' has an empty string. (ie class in the HTML instead of something like class="23Tbhqewpe_54Yu"
classnames like navbar-bg gets transformed to navbarBg (or their hashes)
I am a newbie, so could you help me with any other workaround to camelCasing for legacy css (for eg: foundation framework)?
stylus is also a popular and advanced preprocessor. Would like to see it natively supported : )
Hey guys,
I've recently seen a post about using multiple plugins but does anyone know a way of exporting the plugins with other modules? In particular assetsPrefix.
I've tried a few different ways:
const withSass = require('@zeit/next-sass');
module.exports = {
assetPrefix: '/staging',
withSass
}
const withSass = require('@zeit/next-sass');
module.exports = {
assetPrefix: '/staging',
withSass() {},
}
const withSass = require('@zeit/next-sass');
module.exports = {
assetPrefix: '/staging',
withSass : withSass() {},
}
But it seems to fail on compiling my sass.
Thanks!
Hi guys, great work with Next!
I encountered an issue which involves next-css
, node_modules
and Server-Side Rendering.
Basically, when a NPM package requires a CSS file, SSR breaks. This is an issue when trying to use a component library that bundles CSS files in itself (in my case, fyndiq-ui).
The bug happens with or without CSSModules, and with or without PostCSS-loader. It also happens in production build
Note that the bug doesn't happen when importing local CSS files (thanks to #50 I presume).
I made a small repo that demonstrates the issue https://github.com/thibautRe/next-css-ssr-bug. You can run the README instructions to reproduce the bug.
I'm willing to submit a PR to fix this behavior. I checked the next-css
code but didn't see anything glaringly problematic.
yarn run v1.3.2
$ rimraf node_modules/.cache/babel-loader && next
> Using external babel configuration
> Location: "/project/.babelrc"
(node:23917) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: extractedChunk.getNumberOfModules is not a function
(node:23917) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: extractedChunk.getNumberOfModules is not a function
My next.config.js
// https://github.com/zeit/next.js/blob/master/examples/with-global-stylesheet
const path = require('path');
const glob = require('glob');
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
webpack(config, { dev, isServer }) {
//const originalEntry = config.entry
//config.entry = async () => {
//const entries = await originalEntry()
//if (entries['main.js']) {
//entries['main.js'].unshift('./client/polyfills.js')
//}
//return entries
//}
// Set project root path as part of the resoler
config.resolve = {
modules: [
...config.resolve.modules,
path.resolve('./')
]
}
// Original Issue:
// https://github.com/zeit/next.js/issues/1877#issuecomment-299396974
//if (config.resolve.alias) {
//delete config.resolve.alias['react'];
//delete config.resolve.alias['react-dom'];
//}
// TODO: Remove this once nextjs issue has been resolved: https://github.com/zeit/next.js/issues/1582
//config.plugins = config.plugins.filter(plugin => {
//if (plugin.constructor.name === 'UglifyJsPlugin') {
//return false;
//} else {
//return true;
//}
//});
config.module.rules.push(
// yaml
{
test: /\.yaml$/,
use: [
{
loader: 'emit-file-loader',
options: {
name: 'dist/[path][name].[ext]'
}
},
'json-loader',
'yaml-loader'
]
},
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
use: [
{
loader: 'emit-file-loader',
options: {
name: 'dist/[path][name].[ext]'
}
},
'babel-loader',
'graphql-tag/loader'
]
}
);
return config;
}
});
I would like to serve the stylesheet from a CDN and I tried something like __NEXT_DATA__.assetPrefix
in _document.js
but with no lucky.
It would be nice to support styled-jsx in next-css plugin. For example:
import styles from './styles.css'
export default () => <div>
<style jsx>{styles}</style>
</div>
i have followed the listed instruction from readme, i can run bootstrap 4 with in development.
However, i can't run it with production.
Repo link https://github.com/ZhengYuTay/next-redux-withcss-jest
<link rel="stylesheet" href="/_next/static/style.css" />
is present in _document.js
but unable to it's not able to be accessed.
I'm using a custom Express server with next.js in a subdirectory. I have installed @zeit/next-css
and added next.config.js
and pages/_document.js
per the README; however, /_next/static/style.css
returns a 404. I've confirmed that the file is being built to .next/static/style.css
. I've also tried to ping it at a few different URLs (e.g. /_next/-/static/style.css
), but I can't find where it's being served. This is all true in both development and production. Do I need to configure the static
folder in my custom server.js
(code below)?
const express = require('express');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dir: './client', dev });
const handle = app.getRequestHandler();
app
.prepare()
.then(() => {
const server = express();
// custom routes
server.get('/s/:id', (req, res) => {
const actualPage = '/show';
const queryParams = { id: req.params.id };
app.render(req, res, actualPage, queryParams);
});
// default route
server.get('*', (req, res) => {
return handle(req, res);
});
server.listen(3000, err => {
if(err) throw err;
console.log('> Ready on http://localhost:3000');
});
})
.catch(ex => {
console.error(ex.stack);
process.exit(1);
});
I don't know why, but in @zeit/next-sass
not working HMR. I tried to fix and swap extracted-loader
with css-hot-loader
and it's working for me.
Is hmr working now or not?
[email protected] (also tested in 5.0.1-canary.2)
my next-config
const webpack = require('webpack')
const withSass = require('@zeit/next-sass')
module.exports = withSass({
cssLoaderOptions: {
modules: true,
localIdentName: '[local]-[hash:base64:5]',
sourceMap: false
},
sassLoaderOptions: {
sourceMap: false,
includePaths: ["./", "./styles/base"]
},
webpack(config) {
const providePlugin = new webpack.ProvidePlugin({
'fetch': 'isomorphic-unfetch',
'React': 'react'
})
config.plugins.push(providePlugin)
return config
}
})
Testing out Next.js, and trying to understand how to include a global stylesheet. I'm seeing some confusing behavior.
This is my next.config.js
:
const withSass = require("@zeit/next-sass");
module.exports = withSass({
cssModules: true
})
I have a global.scss
file which simply changes the background color:
html, body {
background: blue;
}
_document.js
js, I've tried import './global.scss';
but there's no effect, even after a server restartimport './global.scss';
in (any) page.js
, but there's some confusing behavior:
import './global.scss';
from my component, the background color does not go away (but if I change the scss, the background does live reload)It's not ideal to add a "global" css import to every page. Is there a way to do once? Should it work in _document.js
? I'm thinking things like importing Bootstrap and other utilities, it's nice to have a global CSS file with those dependencies. It also fits well with my CSS mental model and development. A global style for styles that are truly global, and co-located scss for component styling
can you make a example config ,like extractCSSPlugin
Next 5.0.1-canary.2
Node 8.1.3
yarn run v1.3.2
$ next build
/project/node_modules/@zeit/next-css/css-loader-config.js:31
...cssLoaderOptions
^^^
SyntaxError: Unexpected token ...
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:533:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/project/node_modules/@zeit/next-css/index.js:2:25)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Tried to remove existing next.config.js and replace it with vanila one like
const withCss = require('@zeit/next-css');
module.exports = withCss({
webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
return config;
}
});
Still doesn't work
Btw, my babelrc
{
"presets": [
"next/babel",
"stage-0",
"flow",
],
"plugins": [
["styled-components", { "ssr": true, "displayName": true, "preprocess": false, "minify": false, "transpileTemplateLiterals": false } ],
"babel-plugin-root-import",
"recharts",
["transform-define", "./env-config.js"],
"transform-export-extensions",
"transform-decorators-legacy",
[
"inline-import",
{
"extensions": [".css"]
}
]
],
"env": {
"debug": true
}
}
When I make a static export (next build && next export), the style.css (generated thanks to withCSS) file is not exported.
@zeit/next-css : 0.1.2
next: 5.0.0
Just discovered the cssLoaderOptions are not correctly passed - i would have a fix for it but don't have the permission yet to push a feature-branch to actually open the PR. Would totally like to contribute! :)
Hi, I am using next-css with next-typescript, but when I import inside my _document.tsx the CSS files, which are all inside _next/static/, the styles are not applied to the pages of the app.
My project/pages/_document.tsx tag has:
<link rel="stylesheet" href="../_next/static/header.css" />
<link rel="stylesheet" href="../_next/static/index.css" />
My next.config.js is:
`
const withTypescript = require('@zeit/next-typescript');
const withCSS = require('@zeit/next-css');
module.exports = withCSS(withTypescript({
webpack(config, options) {
return config
},
typescriptLoaderOptions: {
transpileOnly: false
}
}));
`
My _next/ and pages/ folders are ate the same leve in the Project's root folder.
The styles are not being applied anywhere and I can't figure out why.
There is a way to work combining more than one styles configuration?
I noticed when I try to combine two preprocesor, the last one overwrite the output file.
I want to add https://ant.design/ LESS files as a global style and manage my app styles using SASS with CSS Modules.
Can you show me an example if there is a way to do it?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.