create-react-app with sass not loading styles

Question

I'm trying to add sass/scss support to create-react-app.

So I did these steps:

npm eject
npm install sass-loader node-sass --save-dev
Opned the webpack.config.dev.js file and added this to loaders section:
```
{
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
},
```

In my app.js file i reference an scss file: import './css/app.scss';

When i run npm start everything compiles with no errors but the application loads with no styling.

What am i missing?

@TheReason - I tried with and without it, didn't help either way — Tomer
– Tomer, Commented Dec 8, 2016 at 15:04
@DanAbramov - Thanks Dan, it worked! How about you write it as an answer so i can mark it as true? — Tomer
– Tomer, Commented Dec 8, 2016 at 21:17
I had this issue coming from an older version of react-scripts using node-sass-chokidar. I was able to get it working by deleting the old autogenerated .css files and uninstalling node-sass-chokidar and npm-run-all. After, I ran npm install sass-loader node-sass --save-dev. Then, I ran npm start and it output file path errors in the console, which I was able to resolve quickly with using the CRA style docs. Then, it all worked fine. — technogeek1995
– technogeek1995, Commented Dec 10, 2019 at 14:30

Tomas Ramirez Sarduy · Accepted Answer · 2017-01-24 12:14:14Z

16

I just went through this, and seems that there are lot of people lost or not finding the right answer. This is what I did:

Get control over the configuration

npm run eject

Running this command will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project, as you noted all that was inside a npm module called react-script. Do not modify this package directly!

Install sass compiler and webpack loader

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

At this point you have to install the sass compiler and the webpack loader as development dependencies.

Modify the webpack configuration

Open config\webpack.config.dev.js.

Add /\.scss$/, to the exclude array in the url loader, it will look something like this after the update:

exclude: [
    /\.html$/,
    /\.(js|jsx)$/,
    /\.css$/,
    /\.json$/,
    /\.svg$/,
    /\.scss$/, //Add this line
],

Add the SASS/SCSS loader:

{
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
},

edited Jan 24, 2017 at 12:14

answered Dec 9, 2016 at 22:53

Tomas Ramirez Sarduy

17.5k8 gold badges73 silver badges86 bronze badges

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

5 Comments

Tomas Ramirez Sarduy Over a year ago

@BrunoQuaresma, maybe if you share a more detailed explanation I could help :)

Bruno Quaresma Over a year ago

I reseted the file, followed the instructions again and it worked. Thanks!

Roberto Navarro Over a year ago

You can add sourceMap support: loaders: ['style', 'css?sourceMap', 'postcss' ,'sass?sourceMap']

Tomasz Mularczyk Over a year ago

at development this makes load sass files in <style> tags and build will not include styles at all.

shershen Over a year ago

Modern official solution: github.com/facebookincubator/create-react-app/blob/master/…

bluemmb · Accepted Answer · 2021-03-17 11:15:38Z

3

I was stuck with the same problem reading it's documentations.

Unitl I found that the README.md file inside the created project with create-react-app has documented it in another way and it worked. I think relying on that readme file ( that is shipped with your created project ) is better option.

edited Mar 17, 2021 at 11:15

answered Apr 27, 2019 at 18:26

bluemmb

952 silver badges9 bronze badges

Comments

Cijo · Accepted Answer · 2017-06-21 07:43:55Z

1

Styling using Sass without Ejecting

1) Install Koala

Koala is a sass, less etc.. compiler. You can use any tools of your choice for this.

2) Add your src folder

Add the source folder containing all your SCSS files to Koala. It will monitor for any modification to your Sass files and generate the compiled CSS version instantly.

3) Refer to the CSS files

Use the CSS file generated by Koala directly your project.

import './style.css';

answered Jun 21, 2017 at 7:43

Cijo

2,9441 gold badge16 silver badges24 bronze badges

Comments

anud33p · Accepted Answer · 2018-10-11 06:40:27Z

1

Step 1:

npm run eject

Now the config files will be shown in the project folder

Step 2: Install sass compiler and webpack loader

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

In config\webpack.config.dev.js add /.scss$/ to the exclude array

Step 3: Add below loader in the rules array (should be added before file-loader)

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

And start your application.

You can rename your existing css files to scss and work

answered Oct 11, 2018 at 6:40

anud33p

3185 silver badges15 bronze badges

1 Comment

evanjmg Over a year ago

never eject - use customize cra etc

jie ren · Accepted Answer · 2017-03-15 09:42:30Z

-1

{
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass','scss']   //add 'scss'
},

answered Mar 15, 2017 at 9:42

jie ren

11 bronze badge

Collectives™ on Stack Overflow

create-react-app with sass not loading styles

5 Answers 5

Get control over the configuration

Install sass compiler and webpack loader

Modify the webpack configuration

5 Comments

Comments

Styling using Sass without Ejecting

1) Install Koala

2) Add your src folder

3) Refer to the CSS files

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Get control over the configuration

Install sass compiler and webpack loader

Modify the webpack configuration

5 Comments

Comments

Styling using Sass without Ejecting

1) Install Koala

2) Add your src folder

3) Refer to the CSS files

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related