CODEWITHSUNDEEP
reactjswebpackcreate-react-app
Tomer
Tomer

Reputation: 17940

create-react-app with sass not loading styles

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

So I did these steps:

  1. npm eject
  2. npm install sass-loader node-sass --save-dev

  3. 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?

Upvotes: 10

Views: 43351

Answers (5)

bluemmb
bluemmb

Reputation: 95

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.

Upvotes: 3

anud33p
anud33p

Reputation: 318

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

Upvotes: 1

Cijo
Cijo

Reputation: 2866

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';

Upvotes: 1

jie ren
jie ren

Reputation: 1

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

Upvotes: -1

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17481

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

  1. Open config\webpack.config.dev.js.

  2. 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
],

  3. Add the SASS/SCSS loader:

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

Upvotes: 16

Related Questions