CODEWITHSUNDEEP
reactjswebpacksass-loader
Elisa
Elisa

Reputation: 11

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

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

Upvotes: 1

Views: 140

Answers (1)

James Gentes
James Gentes

Reputation: 8096

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

Upvotes: 1

Related Questions