How to Use Sass/SCSS (#880)

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)

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

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",

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); });
 }