Answer the question
In order to leave comments, you need to log in
How to make webpack compile all scss files into one css file?
Good afternoon! Can you please tell me how to fix the webpack config so that it compiles all *.scss into one separate *.css file?
Now it compiles a separate blob for each sass file. I don’t understand why, I do everything as in the documentation , plus I tried various articles.
What else needs to be added to make it work? I need one css file as a result.
I would be very grateful for any help.
prod config
module.exports = merge(require('./webpack.base.config'), {
module: {
rules: [{
test: /\.scss$/,
use: [
// fallback to style-loader in development
process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
})
],
});
webpack.base.config
module.exports = {
context: resolve(__dirname, '../'),
output: {
filename: 'bundle.js',
path: resolve(__dirname, '../build'),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
options: {
limit: 8192,
},
},
{
test: /\.html$/,
use: 'raw-loader',
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "src/index.html",
}),
]
};
Answer the question
In order to leave comments, you need to log in
Import all scss into one scss, then in entry point js import this scss
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question