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.