How can I configure Webpack (or Babel) in order to use sass in a React project?

Question

As from the title, I don't know where to start configuring anything in order to be able to use .scss files for my components. I know how to configure loaders in webpack.config.js, but in the boilerplate I have, there is no webpack.(dev|prod).config.js

I've read that I should create a .babelrc, but then I got lost. Can anyone help me with this?

structure of my project: structure folders of project

Looks like it is a project generated from create-react-app. If it is there is guide how to add scss here github.com/facebookincubator/create-react-app/blob/master/… — Kunukn
– Kunukn, Commented Nov 27, 2017 at 22:33
Yes, it's a project generated from create-react-app. Thank you! In order to use "svg-sprite-loader", do I need to run eject and add the setting in webpack config or there is a better way to do so? — Elisa
– Elisa, Commented Nov 28, 2017 at 10:16
If you need to modify webpack config and use custom stuff then you need to eject. Once you eject, you can't go back. Personally I would backup first to make sure I could go back in case something is broken or don't work as expected. — Kunukn
– Kunukn, Commented Nov 28, 2017 at 10:43

James Gentes · Accepted Answer · 2017-11-28 01:04:39Z

1

You'll need to install a few loaders with npm:

npm i style-loader css-loader sass-loader --save-dev

Then you'll need to add the loaders to the module section of your webpack config file:

module: {
  loaders: [
    // Sass
    {
      test: /\.scss$/,
      loader: 'style-loader!css-loader!sass-loader'
    },
    // CSS
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }
 }

answered Nov 28, 2017 at 1:04

James Gentes

8,22610 gold badges48 silver badges66 bronze badges

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

Collectives™ on Stack Overflow

How can I configure Webpack (or Babel) in order to use sass in a React project?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related