Webpack and sass

Question

I'm having issues loading in my scss files with webpack.

I get this error:

Module build failed: 
@import 'bulma';
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "content = requi..."

This is my webpack config file:

module.exports = {
  entry: "./app/App.js",
  output: {
    filename: "public/bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      },
      {
        test: /\.scss$/,
        loaders: ['css', 'sass', 'style']
      }
    ]
  }
};

This is main.scss:

@import 'bulma';

body {
  background-color: red;
}

and I import the file in the App.js entry point like so:

import './stylesheets/main.scss';

Any tips?

Answer 1

Your loaders are in the wrong order. Loaders are read right-to-left. You want to parse the SCSS into CSS, then parse CSS into Javascript, then load the parsed CSS as a style tag, so you want:

        loaders: ['style', 'css', 'sass']