webpack sass-loader not generating a css file

Question

I can't figure out how to render a css file with the webpack sass-loader.

Here's what my webpackconfig.js looks like:

module.exports = {
  context: __dirname + "/app",
  entry: {
    javascript: "./app.js",
    html: "./index.html"
  },


  output: {
    filename: "app.js",
    path: __dirname + "/dist"
  },


  module: {
    loaders: [
      //JAVASCRIPT
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"],
      },

      //Index HMTML
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]",
      },
      //Hotloader
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["react-hot", "babel-loader"],
      },

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

    ],
  }

}

As you can see I'm using the sass-loader module loader specified in the documentation.

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

My root looks as such:

Project Root:
  app:
    style.scss
  dist:
   ?????? WTF is my css file??
  webpack.config.js

I can get everything else working such as html and jsx babble loaders. I just type in webpack into the command line and things happen.

I'm doing something wrong with the sass loader. What is it? Please help.

Solution

You are using the style-loader, which, by default, embeds your CSS in Javascript and injects it at runtime.

If you want real CSS files instead of CSS embedded in your Javascript, you should use the ExtractTextPlugin.

A basic config would be:

1. Add var ExtractTextPlugin = require('extract-text-webpack-plugin'); to the top of your Webpack config file.

2. Add the following to your Webpack config:

   plugins: [
       new ExtractTextPlugin('[name].css'),
   ]
   

3. Change your SASS loader config to the following:

   {
       test: /\.scss$/,
       loader: ExtractTextPlugin.extract(
           'style-loader', // backup loader when not building .css file
           'css-loader!sass-loader' // loaders to preprocess CSS
       )
   }
   

What this does is extract all CSS it can find in your bundle to a separate file. The name will be based on your entrypoint name, which in your case will result in javascript.css (from the entry part of your config).

The ExtractTextPlugin.extract-loader is used by the plugin to find the CSS in your code and put it in separate files. The first parameter you give it is the loader it should fall back to if it encounters files in an async module, for example. Generally this is pretty much always style-loader. The second parameter tells the plugin what loaders to use to process the CSS, in this case css-loader and sass-loader, but things like postcss-loader are often used too.

More info on building your CSS with Webpack can be found here: https://webpack.github.io/docs/stylesheets.html#separate-css-bundle

Comments

[Balázs Édes]

you saved a large portion of my hair :)

[piotr.d]

The above is a valid approach, but I'd add a note which I was missing even though I used the above way: webpack won't pick up your styles until you add require("./stylesheet.css") to your module (JS file). It may be obvious (and is mentioned in docs), but for Webpack beginners it's not.

[Hein Haraldson Berg]

@piotr.d Or use html-webpack-plugin. :)

[roberto tomás]

@piotr.d its funny, I get an error when I try to do that: ERROR in ./scripts/app.js Module not found: Error: Cannot resolve 'file' or 'directory' ./app.css ...

[Isaac Pak]

the extract extract-text-webpack-plugin now requires you to explicitly give the names of the loader. ie. extract(css-loader|sass-loader)