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

postcss-loader, postcss-easy-import, normalize.css and autoprefixer (#1352)

This commit is contained in:
Orlin M Bozhinov 2017-03-05 17:48:37 +02:00 committed by Guillermo Rauch
parent 5947716ff7
commit 563856f477
6 changed files with 19 additions and 2 deletions

View file

@ -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. 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: This project shows how you can set it up. Have a look at:
- .babelrc - .babelrc
- next.config.js - next.config.js
- pages/index.js - pages/index.js
- postcss.config.js
- styles/index.scss - styles/index.scss
Please, report any issue on enhancement related to this example to its original Please, report any issue on enhancement related to this example to its original

View file

@ -14,12 +14,12 @@ module.exports = {
, ,
{ {
test: /\.css$/, test: /\.css$/,
use: ['babel-loader', 'raw-loader'] use: ['babel-loader', 'raw-loader', 'postcss-loader']
} }
, ,
{ {
test: /\.s(a|c)ss$/, test: /\.s(a|c)ss$/,
use: ['babel-loader', 'raw-loader', use: ['babel-loader', 'raw-loader', 'postcss-loader',
{ loader: 'sass-loader', { loader: 'sass-loader',
options: { options: {
includePaths: ['styles', 'node_modules'] includePaths: ['styles', 'node_modules']

View file

@ -10,11 +10,15 @@
"author": "Davide Bertola <dade@dadeb.it>", "author": "Davide Bertola <dade@dadeb.it>",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"autoprefixer": "6.7.6",
"babel-plugin-module-resolver": "2.5.0", "babel-plugin-module-resolver": "2.5.0",
"babel-plugin-wrap-in-js": "^1.1.0", "babel-plugin-wrap-in-js": "^1.1.0",
"glob": "7.1.1", "glob": "7.1.1",
"next": "^2.0.0-beta.18", "next": "^2.0.0-beta.18",
"node-sass": "^4.4.0", "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", "raw-loader": "^0.5.1",
"react": "^15.4.2", "react": "^15.4.2",
"react-dom": "^15.4.2", "react-dom": "^15.4.2",

View file

@ -0,0 +1,6 @@
module.exports = {
plugins: [
require('postcss-easy-import')({prefix: '_'}), // keep this first
require('autoprefixer')({ /* ...options */ }) // so imports are auto-prefixed too
]
}

View file

@ -1,3 +1,5 @@
@import 'normalize.css';
p { p {
font-size: xx-large; font-size: xx-large;
color: black; color: black;

View file

@ -1,3 +1,5 @@
@import 'normalize.css';
$primary-color: black; $primary-color: black;
p { p {