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”.
# Known bugs
# Known issues
There's a bug, possibly within `next.js`, making composition between files unuseable. Consider the following:
*`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'
```
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.

View file

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

View file

@ -10,18 +10,17 @@
"author": "Thomas Lindstrøm <t@hom.as>",
"license": "ISC",
"dependencies": {
"babel-plugin-wrap-in-js": "^1.1.1",
"css-loader": "^0.26.1",
"cssnano": "^3.10.0",
"next": "latest",
"postcss-cssnext": "^2.9.0",
"postcss-loader": "^1.3.0",
"raw-loader": "^0.5.1",
"postcss-modules": "^0.6.4",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"skeleton-loader": "0.0.7",
"val-loader": "^0.5.0"
"skeleton-loader": "^1.1.2",
"trash": "^4.0.1"
},
"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 {
composes: font-color from './global.css';
font-size: 20px;
color: red;
}

View file

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