Webpack mini-css-extract-plugin not loading main css bundle

Question

I'm extracting the css of my application with mini-css-extract-plugin. It does work, as it's extracting and splitting the css correctly of my imported components correctly. It also extracts to 'main.css', in which are the styles from modules that aren't dynamically imported.

This last file however, main.css, isn't loaded in my application. Do I need to load this file manually, using a <link>?

Webpack: 4.12.0

mini-css-extract-plugin: 0.4.0

My config:

plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
    new MiniCssExtractPlugin({
        filename: 'main.css',
        chunkFilename: '[name].[contenthash].css',
    }),
],

module: {
    rules: [
    {
        test: /\.(css|less)$/,
        exclude: /node_modules/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader',
                options: {
                    modules: true,
                    localIdentName: '[name]__[local]',
                },
            },
            {
                loader: 'less-loader',
                options: {
                    javascriptEnabled: true,
                },
            },
        ],
    }
]

Do you have html-webpack-plugin? If not, yes, you need to insert the css into a link tag, webpack does not build html (without any plugin). — PlayMa256, Jun 13 '18 at 12:41
@MatheusSilva I don't use it (and can't because of the architecture of our website). — Ashwin, Jun 13 '18 at 15:39
Yeah, so you'll need to insert a link to the bundle yourself. — PlayMa256, Jun 13 '18 at 16:09

Webpack mini-css-extract-plugin not loading main css bundle

0 Answers0