Webpack sass where is the css file

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.


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