How to setup react app with SCSS? (Errors)

Question

I am trying to setup my react project so I can use SASS in the SCSS format.

This is in my webpack.config.dev.js:

      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: require.resolve('sass-loader'),
          }
        ]
      }

I import the scss files into my jsx in two different ways:

import './index.scss';
import css from './ModalWrapper.scss';

When I run the app I am currently getting the error:

./src/index.scss
Module build failed: 
body {
^
      Invalid CSS after "m": expected 1 selector or at-rule, was "module.exports = __"
      in /pathtoapp/web/src/index.scss (line 1, column 1)

It appears me, that one, react is trying to interpret the SCSS as CSS which should work. In addition, react believes that body is not valid CSS. There, I would believe that neither CSS or SCSS are being loaded correctly.

Any help would be appreciated. There are quite a few unanswered questions to this problem.

Answer 1

This is what ended up working for me:

{
        test: /\.scss$/,
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader',
          options: {
            modules: true,
            sourceMap: true,
            localIdentName: "[local]___[hash:base64:5]",
          },
        }, {
          loader: 'sass-loader',
          options: {
            outputStyle: "expanded",
            sourceMap: true,
          },
        }]
      },