commit 16441de1acca5b4cf449090f361067739d543bc7
parent 3a1edd82df009de0e2d4dadb0618f8c4c18acf33
Author: Vladimir Kutepov <frenzzy.man@gmail.com>
Date: Mon, 26 Sep 2016 23:04:43 +0400
How to Use Sass/SCSS (#880)
Diffstat:
4 files changed, 80 insertions(+), 12 deletions(-)
diff --git a/docs/README.md b/docs/README.md
@@ -19,3 +19,4 @@
* [How to Integrate Redux](./recipes/how-to-integrate-redux.md)
* [How to Integrate React Intl](./recipes/how-to-integrate-react-intl.md)
* [How to Integrate Disqus](./recipes/how-to-integrate-disqus.md)
+* [How to Use Sass/SCSS](./recipes/how-to-use-sass.md)
diff --git a/docs/recipes/how-to-use-sass.md b/docs/recipes/how-to-use-sass.md
@@ -0,0 +1,67 @@
+## How to Use Sass/SCSS
+
+> **Note**: Using plain CSS via [PostCSS](http://postcss.org/) is recommended approach because it
+reduces the size of the tech stack used in the project, enforces you to learn vanilla CSS syntax
+with modern CSS Level 3+ features that allow you doing everything you would normally do with
+Sass/SCSS. Also compilation of plain `.css` files should work faster with `postcss` pre-processor
+than `node-sass`.
+
+### Step 1
+
+Install [`node-sass`](https://github.com/sass/node-sass) and
+[`sass-loader`](https://github.com/jtangelder/sass-loader) modules as dev dependencies:
+
+```sh
+$ npm install node-sass --save-dev
+$ npm install sass-loader --save-dev
+```
+
+### Step 2
+
+Update [`webpack.config.js`](../../webpack.config.js) file to use `sass-loader` for `.scss` files:
+
+```js
+const config = {
+ ...
+ module: {
+ loaders: [
+ ...
+ {
+ test: /\.scss$/,
+ loaders: [
+ 'isomorphic-style-loader',
+ `css-loader?${JSON.stringify({ sourceMap: DEBUG, minimize: !DEBUG })}`,
+ 'postcss-loader?pack=sass',
+ 'sass-loader',
+ ],
+ },
+ ...
+ ]
+ }
+ ...
+}
+```
+
+### Step 3
+
+Add one more configuration (pack) for [PostCSS](https://github.com/postcss/postcss) named `sass` to
+enable [Autoprefixer](https://github.com/postcss/autoprefixer) for your `.scss` files:
+
+```js
+const config = {
+ ...
+ postcss(bundler) {
+ return {
+ defaults: [
+ ...
+ ],
+ sass: [
+ require('autoprefixer')(),
+ ],
+ };
+ }
+ ...
+}
+```
+
+For more information visit https://github.com/jtangelder/sass-loader and https://github.com/sass/node-sass
diff --git a/package.json b/package.json
@@ -25,11 +25,11 @@
"isomorphic-style-loader": "1.0.0",
"jsonwebtoken": "7.1.9",
"markdown-it": "8.0.0",
- "node-fetch": "1.6.1",
+ "node-fetch": "1.6.3",
"normalize.css": "4.2.0",
"passport": "0.3.2",
"passport-facebook": "2.1.1",
- "pretty-error": "2.0.0",
+ "pretty-error": "2.0.1",
"query-string": "4.2.3",
"react": "15.3.2",
"react-dom": "15.3.2",
@@ -64,10 +64,10 @@
"css-loader": "^0.25.0",
"del": "^2.2.2",
"enzyme": "^2.4.1",
- "eslint": "^3.5.0",
- "eslint-config-airbnb": "^11.1.0",
+ "eslint": "^3.6.0",
+ "eslint-config-airbnb": "^12.0.0",
"eslint-loader": "^1.5.0",
- "eslint-plugin-import": "^1.15.0",
+ "eslint-plugin-import": "^1.16.0",
"eslint-plugin-jsx-a11y": "^2.2.2",
"eslint-plugin-react": "^6.3.0",
"extend": "^3.0.0",
@@ -81,7 +81,7 @@
"ncp": "^2.0.0",
"pixrem": "^3.0.2",
"pleeease-filters": "^3.0.0",
- "postcss": "^5.2.0",
+ "postcss": "^5.2.2",
"postcss-calc": "^5.3.1",
"postcss-color-function": "^2.0.1",
"postcss-custom-media": "^5.0.1",
@@ -134,12 +134,12 @@
"rules": {
"arrow-parens": "off",
"generator-star-spacing": "off",
+ "import/extensions": "off",
"import/no-extraneous-dependencies": "off",
"react/forbid-prop-types": "off",
"react/jsx-filename-extension": "off",
"react/no-danger": "off",
- "react/no-unused-prop-types": "off",
- "react/require-extension": "off"
+ "react/no-unused-prop-types": "off"
}
},
"stylelint": {
@@ -166,9 +166,9 @@
}
},
"scripts": {
- "eslint": "eslint src tools",
- "stylelint": "stylelint \"src/**/*.css\"",
- "lint": "npm run eslint && npm run stylelint",
+ "lint:js": "eslint src tools",
+ "lint:css": "stylelint \"src/**/*.{css,less,scss,sss}\"",
+ "lint": "npm run lint:js && npm run lint:css",
"test": "mocha \"src/**/*.test.js\" --require test/setup.js --compilers js:babel-register",
"test:watch": "npm run test -- --reporter min --watch",
"clean": "babel-node tools/run clean",
diff --git a/tools/run.js b/tools/run.js
@@ -29,7 +29,7 @@ function run(fn, options) {
if (require.main === module && process.argv.length > 2) {
delete require.cache[__filename]; // eslint-disable-line no-underscore-dangle
- const module = require(`./${process.argv[2]}.js`).default;
+ const module = require(`./${process.argv[2]}.js`).default; // eslint-disable-line import/no-dynamic-require
run(module).catch(err => { console.error(err.stack); process.exit(1); });
}
