how-to-use-sass.md (1926B)
1 ## How to Use Sass/SCSS 2 3 > **Note**: Using plain CSS via [PostCSS](http://postcss.org/) is recommended approach because it 4 reduces the size of the tech stack used in the project, enforces you to learn vanilla CSS syntax 5 with modern CSS Level 3+ features that allow you doing everything you would normally do with 6 Sass/SCSS. Also compilation of plain `.css` files should work faster with `postcss` pre-processor 7 than `node-sass`. 8 9 ### Step 1 10 11 Install [`node-sass`](https://github.com/sass/node-sass) 12 (includes [node-gyp](https://github.com/nodejs/node-gyp#readme) 13 and [prerequisites](https://github.com/nodejs/node-gyp#installation)) and 14 [`sass-loader`](https://github.com/jtangelder/sass-loader) modules as dev dependencies: 15 16 ```sh 17 $ yarn add node-sass --dev 18 $ yarn add sass-loader --dev 19 ``` 20 21 ### Step 2 22 23 Update [`webpack.config.js`](../../tools/webpack.config.js) file to use `sass-loader` for `.scss` files: 24 25 ```js 26 const config = { 27 ... 28 module: { 29 rules: [ 30 ... 31 { 32 test: /\.scss$/, 33 use: [ 34 { 35 loader: 'isomorphic-style-loader', 36 }, 37 { 38 loader: 'css-loader', 39 options: { 40 sourceMap: isDebug, 41 minimize: !isDebug, 42 }, 43 }, 44 { 45 loader: 'postcss-loader', 46 options: { 47 config: './tools/postcss.sass.js', 48 }, 49 }, 50 { 51 loader: 'sass-loader', 52 }, 53 ], 54 }, 55 ... 56 ] 57 } 58 ... 59 } 60 ``` 61 62 ### Step 3 63 64 Add one more configuration (`tools/postcss.sass.js`) for [PostCSS](https://github.com/postcss/postcss) to 65 enable [Autoprefixer](https://github.com/postcss/autoprefixer) for your `.scss` files: 66 67 ```js 68 module.exports = () => ({ 69 plugins: [ 70 require('autoprefixer')(), 71 ], 72 }); 73 ``` 74 75 For more information visit https://github.com/jtangelder/sass-loader and https://github.com/sass/node-sass