Webpack sass where is the css file

Question

I am using web pack with sass loader like this:

module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: "style!css!sass"
      }
    ]
  }
};

But i see the styles apply to the style tag, where is the generate css file?

Solution 1

By default, the style-loader inlines the compiled css into your bundle, which are added to the head of the page with the output file e.g. bundle.js. Using the extract-text-webpack-plugin you can remove the compiled css from the bundle, and export it to a separate file.

First - wrap your loader in the plugin:

 loaders: [{
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract(
    "style",
    "css!sass")
 }]
},

Then tell the plugin what to call the file it generates:

plugins: [
    new ExtractTextPlugin("app.css")
 ]

Include this file in your HTML normally.

Solution 2

If you want a separate CSS file when using Webpack, you need to use the extract-text-webpack-plugin.

Comments

[TetraDev]

Be warned that this kills Hot Module Replacement functionality

[adam-beck]

Yes this will kill HMR but don't forget you don't need to do this every time. You could only run this plugin in a production webpack configuration.

[angry kiwi]

@adc do we really need style loader in this case? it could be just loader: ExtractTextPlugin.extract( "css!sass") }]

[adam-beck]

I don't think that's how the ExtractText plugin works. You would still need to include the style loader.

[shicky]

I have bunch of scss files. Is there a way for me to create bunch of css files from them?

[Paweł]

@adc You said include file in html normally, what if I use extractTextPlugin in production mode and style-loder in dev mode? is there any way to add <link href="extracted.css"> tag automatically in production mode?