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?
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.
The extract-text-webpack-plugin has been deprecated you should use the mini-css-extract-plugin. Assuming you have your styles in css/app.scss, your entry file should import it as usual like:
import 'css/app.scss';
Add the plugin:
plugins: [new MiniCssExtractPlugin()]
And add the plugin to your loader chain:
{
test: /\.s[ac]ss$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
When you run webpack with that configuration you'll end up with an app.css file loaded in your HTML with a tag similar to:
<link href="app.css" rel="stylesheet">