This guide will simply cover to embed SASS support in React.js project.

First, install node-sass and sass-loader npm packages.

Yarn: yarn add sass-loader --dev
      yarn add node-sass 
    
NPM: npm install node-sass
     npm install sass-loader --save-dev

Then add this in your webpack loaders. It will test for .scss files apply the sass loader. It also has included hashing.

{
    test: /\.scss$/,
    loader: 'style!css!sass?modules&localIdentName=[name]---[local]---[hash:base64:5]'
}

After this, you will need to add the base .scss style file to the entry point of webpack. I always use a base style file including all the other stylesheets in it. My file structure is as follows

assets -/
         styles -/
                  common -/
                            app-header.scss
                   ...
                  styles.sccs

And I import the app-header.scss in styles.scss.

@import "./common/app-header";

Then add entry point in webpack.

entry: [
    'babel-polyfill',
  './assets/styles/styles.scss',
    './src/app.js',
  ],

And also add this line in the plugins too. This should be changed to the preference of production and dev mode too. Please refer  https://github.com/webpack-contrib/extract-text-webpack-plugin for more details. The extract-text plugin will be doing the description on its wiki.

“It moves all the required *.css modules in entry chunks into a separate CSS file. So your styles are no longer inlined into the JS bundle, but in a separate CSS file (styles.css). ”

plugins: [
  new ExtractTextPlugin("styles.css"),
]

Done. Now you can add any styles in the styles folder and import it in styles.scss.