diff --git a/examples/with-global-stylesheet/README.md b/examples/with-global-stylesheet/README.md index c337a0ae3c4dc..42605f2e83a4a 100644 --- a/examples/with-global-stylesheet/README.md +++ b/examples/with-global-stylesheet/README.md @@ -37,10 +37,13 @@ Another babel plugin [module-resolver](https://github.com/tleunen/babel-plugin-m The `sass-loader` is configured with `includePaths: ['styles', 'node_modules']` so that your scss can `@import` from those places, again without relative paths, for maximum convenience and ability to use npm-published libraries. Furthermore, `glob` paths are also supported, so one could for example add `'node_modules/@material/*'` to the `includePaths`, which would make [material-components-web](https://github.com/material-components/material-components-web) (if you'd like) even easier to work with. +Furthermore, PostCSS is used to [pre-process](https://blog.madewithenvy.com/webpack-2-postcss-cssnext-fdcd2fd7d0bd#.r6t2d0smy) both `css` and `scss` stylesheets, the latter after Sass pre-processing. This is to illustrate `@import 'normalize.css';` from `node_modules` thanks to `postcss-easy-import`. [Autoprefixer](https://github.com/postcss/autoprefixer) is also added as a "best practice". Consider [cssnext](http://cssnext.io) instead, which includes `autoprefixer` as well as many other CSS spec features. + This project shows how you can set it up. Have a look at: - .babelrc - next.config.js - pages/index.js +- postcss.config.js - styles/index.scss Please, report any issue on enhancement related to this example to its original diff --git a/examples/with-global-stylesheet/next.config.js b/examples/with-global-stylesheet/next.config.js index ce788fab1b0f2..f8935363a94ef 100644 --- a/examples/with-global-stylesheet/next.config.js +++ b/examples/with-global-stylesheet/next.config.js @@ -14,12 +14,12 @@ module.exports = { , { test: /\.css$/, - use: ['babel-loader', 'raw-loader'] + use: ['babel-loader', 'raw-loader', 'postcss-loader'] } , { test: /\.s(a|c)ss$/, - use: ['babel-loader', 'raw-loader', + use: ['babel-loader', 'raw-loader', 'postcss-loader', { loader: 'sass-loader', options: { includePaths: ['styles', 'node_modules'] diff --git a/examples/with-global-stylesheet/package.json b/examples/with-global-stylesheet/package.json index 00a1677096c26..6d0ff1b2bd31a 100644 --- a/examples/with-global-stylesheet/package.json +++ b/examples/with-global-stylesheet/package.json @@ -10,11 +10,15 @@ "author": "Davide Bertola ", "license": "ISC", "dependencies": { + "autoprefixer": "6.7.6", "babel-plugin-module-resolver": "2.5.0", "babel-plugin-wrap-in-js": "^1.1.0", "glob": "7.1.1", "next": "^2.0.0-beta.18", "node-sass": "^4.4.0", + "normalize.css": "5.0.0", + "postcss-easy-import": "2.0.0", + "postcss-loader": "1.3.3", "raw-loader": "^0.5.1", "react": "^15.4.2", "react-dom": "^15.4.2", diff --git a/examples/with-global-stylesheet/postcss.config.js b/examples/with-global-stylesheet/postcss.config.js new file mode 100644 index 0000000000000..6c583f463ffe9 --- /dev/null +++ b/examples/with-global-stylesheet/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: [ + require('postcss-easy-import')({prefix: '_'}), // keep this first + require('autoprefixer')({ /* ...options */ }) // so imports are auto-prefixed too + ] +} diff --git a/examples/with-global-stylesheet/styles/index.css b/examples/with-global-stylesheet/styles/index.css index 130880676e1a8..d9ad8c13c6ecd 100644 --- a/examples/with-global-stylesheet/styles/index.css +++ b/examples/with-global-stylesheet/styles/index.css @@ -1,3 +1,5 @@ +@import 'normalize.css'; + p { font-size: xx-large; color: black; diff --git a/examples/with-global-stylesheet/styles/index.scss b/examples/with-global-stylesheet/styles/index.scss index 1306155d247d0..552f230c67ae9 100644 --- a/examples/with-global-stylesheet/styles/index.scss +++ b/examples/with-global-stylesheet/styles/index.scss @@ -1,3 +1,5 @@ +@import 'normalize.css'; + $primary-color: black; p {