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.

Are you importing each scss file into a different component for - component styles, or do you just import the root scss file in your root app file? — Spencer Bigum
– Spencer Bigum, Commented Nov 7, 2017 at 21:06
I import the scss file into a different component for component styles. However, I would also like to have a couple global scss files for constants and fonts. — Programmingjoe
– Programmingjoe, Commented Nov 7, 2017 at 21:11
Well its a little more complex than a simple answer, but I think this article will help guide you through installing and getting it setup -> medium.com/@srinisoundar/… — Spencer Bigum
– Spencer Bigum, Commented Nov 7, 2017 at 21:19
Why are you require.resolve on the loaders? Just do loader: 'saas-loader' and similar for other loaders in your config above. — vma
– vma, Commented Nov 8, 2017 at 16:28

Swapnil · Accepted Answer · 2017-11-20 12:56:00Z

19

If you are on Webpack 3, add this to module.rules

{
    test: /\.scss$/,
    loader: [
      require.resolve('style-loader'),
      require.resolve('css-loader'),
      require.resolve('sass-loader'),
    ]
},

And then add the file loader and make sure to add .scss to the array of the key exclude like this

{
        loader: require.resolve('file-loader'),
        // Exclude `js` files to keep "css" loader working as it injects
        // it's runtime that would otherwise processed through "file" loader.
        // Also exclude `html` and `json` extensions so they get processed
        // by webpacks internal loaders.
        exclude: [/\.js$/, /\.html$/, /\.json$/, /\.scss$/,],
        options: {
          name: 'static/media/[name].[hash:8].[ext]',
        },
}

And of course, make sure you have style-loader, sass-loader, css-loader and file-loader in you package.json. This code snippet worked for me when using the latest version of create-react-app.

answered Nov 20, 2017 at 12:56

Swapnil

2,6031 gold badge21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Franva Over a year ago

Saver~! I spent 2 hours on finding out what's wrong in my webpack config and this one solved my problem~! thanks~!

Programmingjoe · Accepted Answer · 2017-11-23 01:29:40Z

0

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,
          },
        }]
      },

answered Nov 23, 2017 at 1:29

Programmingjoe

2,2493 gold badges29 silver badges49 bronze badges

Comments

user2403232 · Accepted Answer · 2018-02-19 05:57:22Z

0

I'm sure the other answers are just as good, but for maximum brevity, this works for me (I erased some of the internal webpack.config.dev.js comments presumably made by the create react folks):

module: {
strictExportPresence: true,
rules: [
        {
            test: /\.scss/,
            use: ['style-loader','css-loader', 'sass-loader']
        },...

I don't know if it matters, but I put this on the top. Also, yes, make sure to add the scss file to the excluded array as mentioned above.

answered Feb 19, 2018 at 5:57

user2403232

815 bronze badges

Collectives™ on Stack Overflow

How to setup react app with SCSS? (Errors)

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related