How to add SASS/SCSS to a create-react-app Project

(Note: The latest version of create-react-app has SASS support built in and this guide is not necessary.)

This explains how to add the SASS/SCSS precompiler to an existing create-react-app project. This will work with the regular or Typescript variations of create-react-app, and should work regardless of the numerous webpack config syntax variations out there.

Eject
You’ll need to eject your project if you haven’t already. I’ve done this many times but it can be a big scary step so read here to find out what it means to eject your project. This is necessary in order to manually edit your webpack config files.

npm run eject

Install SASS
The SASS precompiler runs at build time not runtime, therefore we save it with the save-dev switch.

npm install sass-loader node-sass --save-dev

Edit Webpack Config
You’re going to open your dev config file, locate the existing css rule block, duplicate it, and use it as a reference to create a new scss rule block. Leave the existing css rule in there as-is so that your project will work with both SCSS and plain CSS files.

Find file config/webpack.config.dev.js. Look for the css rule block. It will look something like this but not exactly:

{
  test: /\.css$/,
  use: [
    {
      loader: require.resolve('style-loader'),
    },
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      }
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9',  
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    }, 
  ]
},

Copy and duplicate the whole block and add it right above (before) the existing css block. Edit the new “test” value to make it scss:

{
  test: /\.scss$/,

Insert a sass-loader section in the middle of the new rule right after the css-loader section. You’re inserting the three lines in the middle below. The new scss rule will look something like this but not exactly:

{
  test: /\.scss$/,
  use: [
    {
      loader: require.resolve('style-loader'),
    },
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      }
    },
    {
      loader: require.resolve('sass-loader'),
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9',  
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    }, 
  ]
},

It may seem strange to have “css-loader” inside the scss rule but it’s necessary so that webpack will handle the compiled css properly after its been compiled by scss.

Edit Webpack Config for Prod
Do the same procedure “Edit Webpack Config” again for file config/webpack.config.prod.js. The existing CSS block will look somewhat different in the prod file but the procedure is basically the same. Follow the existing patterns in the css rule and you’ll be fine.

Now you should have an scss rule and a css rule in each config file. Nothing special to do now other than create SCSS files instead of CSS. You can optionally leave your old CSS files in your project and they will be combined with your SCSS since you have rules for both!