CODEWITHSUNDEEP
reactjsecmascript-6webpacksass-loader
Aral Roca
Aral Roca

Reputation: 5929

Sass in webpack

It's my first time with Webpack and I don't undersand why my sass file (.scss) is not loaded. I spend all the afternoon trying and searching, but I don't understand what is wrong in my code.

webpack.config.js

module.exports = {
   entry: "./main.js",
   output: {path: __dirname, filename: "bundle.js"},
   module: {
     loaders: [
       {
         test: /.jsx?$/,
         loader: "babel-loader",
         exclude: /node_modules/,
         query: {
           presets: ["es2015", "react"]
         }
       },
       {
         test: /\.css$/,
         loader: "css-loader!autoprefixer-loader"
       },
       {
         test: /\.scss$/,
         loader: "css-loader!sass-loader"
       }
     ]
   }
 };

package.json dependencies:

//...
"dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-redux": "^4.4.0",
    "redux": "^3.3.1",
    "webpack-dev-server": "^1.14.1"
  },
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.6.5",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "css-loader": "^0.23.1",
    "node-sass": "^3.4.2",
    "redux-devtools": "^3.1.1",
    "sass-loader": "^3.1.2",
    "webpack": "^1.12.14"
  }
 //...

And in my app.js I added this line:

import "./app/sass/app.scss";

There aren't errors in the terminal and neither in the Chrome console. But the SASS file is not loading.

What is wrong in my code?

Thanks!

Upvotes: 1

Views: 566

Answers (1)

Andreyco
Andreyco

Reputation: 22872

You have to install style-loader, css-loader and sass-loader as well.
To do so, run:
npm i css-loader style-loader sass-loader --save-dev

Then, add loaders to your webpack configuration. 

// ...
    {
      test: /\.scss$/,
      loader: 'style!css!sass'
    }]
// ...

You were on good path, though

Upvotes: 5

Related Questions