1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

Update example with-scoped-stylesheets-and-postcss (#1606)

Fixes #1191
This commit is contained in:
Thomas Lindstrøm 2017-05-27 14:12:37 +02:00 committed by Tim Neutkens
parent 787a110b75
commit 0d0ab77db7
7 changed files with 28 additions and 56 deletions

View file

@ -1,10 +0,0 @@
{
"presets": [
"next/babel"
],
"plugins": [
["wrap-in-js", {
"extensions": ["css$"]
}]
]
}

View file

@ -29,26 +29,6 @@ now
Scoped CSS is neat and keeps your JS clean. PostCSS is amazing for extended features, such as nesting. CSS Modules keep your class names “local”. Scoped CSS is neat and keeps your JS clean. PostCSS is amazing for extended features, such as nesting. CSS Modules keep your class names “local”.
# Known bugs # Known issues
There's a bug, possibly within `next.js`, making composition between files unuseable. Consider the following: Composed CSS files are not watched by next.js, and thus, if you change one, nothing will happen. You'll need to edit a JS file or the CSS file you're composing for it to hot reload.
*`styles.css`*
```css
.paragraph {
composes: font-sans from '../global.css';
}
```
*`global.css`*
```css
.font-sans {
font-family: georgia; /* ;) */
}
```
The following error is thrown:
```
Module build failed: Error: Cannot find module '-!./../node_modules/css-loader/index.js??ref--6-4!./../node_modules/postcss-loader/index.js!../global.css'
```

View file

@ -1,3 +1,5 @@
const trash = require('trash')
module.exports = { module.exports = {
webpack: (config) => { webpack: (config) => {
config.module.rules.push( config.module.rules.push(
@ -10,27 +12,21 @@ module.exports = {
name: 'dist/[path][name].[ext]' name: 'dist/[path][name].[ext]'
} }
}, },
'raw-loader',
'val-loader',
{ {
loader: 'skeleton-loader', loader: 'skeleton-loader',
options: { options: {
procedure: (content) => ( procedure: function (content) {
`${content} \n` + ['module.exports = {', const fileName = `${this._module.userRequest}.json`
'stylesheet: module.exports.toString(),', const classNames = JSON.stringify(require(fileName))
'classNames: exports.locals',
trash(fileName)
return ['module.exports = {',
`classNames: ${classNames},`,
`stylesheet: \`${content}\``,
'}' '}'
].join('') ].join('')
) }
}
},
{
loader: 'css-loader',
options: {
modules: true,
minimize: true,
importLoaders: 1,
localIdentName: '[local]-[hash:base64:5]'
} }
}, },
'postcss-loader' 'postcss-loader'

View file

@ -10,18 +10,17 @@
"author": "Thomas Lindstrøm <t@hom.as>", "author": "Thomas Lindstrøm <t@hom.as>",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"babel-plugin-wrap-in-js": "^1.1.1", "cssnano": "^3.10.0",
"css-loader": "^0.26.1",
"next": "latest", "next": "latest",
"postcss-cssnext": "^2.9.0", "postcss-cssnext": "^2.9.0",
"postcss-loader": "^1.3.0", "postcss-loader": "^1.3.0",
"raw-loader": "^0.5.1", "postcss-modules": "^0.6.4",
"react": "^15.4.2", "react": "^15.4.2",
"react-dom": "^15.4.2", "react-dom": "^15.4.2",
"skeleton-loader": "0.0.7", "skeleton-loader": "^1.1.2",
"val-loader": "^0.5.0" "trash": "^4.0.1"
}, },
"devDependencies": { "devDependencies": {
"now": "^3.1.0" "now": "^4.10.3"
} }
} }

View file

@ -0,0 +1,3 @@
.font-color {
color: blue;
}

View file

@ -1,4 +1,4 @@
.paragraph { .paragraph {
composes: font-color from './global.css';
font-size: 20px; font-size: 20px;
color: red;
} }

View file

@ -1,5 +1,9 @@
module.exports = { module.exports = {
plugins: [ plugins: [
require('postcss-cssnext')() require('postcss-cssnext')(),
require('postcss-modules')({
generateScopedName: '[local]-[hash:base64:5]'
}),
require('cssnano')()
] ]
} }