C
C
ch-aqwer2019-07-10 17:24:09
JavaScript
ch-aqwer, 2019-07-10 17:24:09

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

1 answer(s)
A
Andrey Suha, 2019-07-10
@andreysuha

Import all scss into one scss, then in entry point js import this scss

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question