3

I am currently using css module with miniCssExtractPlugin, it is wired it is not working,it do extract css into a separate css file, but the css file is empty.when i use style-loader it looks good with css module, but it will not extract css to a separate file.

const cssDevRules=[
{
    loader:'style-loader'
},
{
    loader:'css-loader?modules&localIdentName=[name]_[local]_[hash:base64:5]',
},
{
    loader:'sass-loader',
}];

but when i try to use miniCssExtractPlugin in production mode, the generate css file is empty.code as below:

const cssProdRules=[
{
    loader: MiniCssExtractPlugin.loader,

},
{
    loader:'css-loader?modules&localIdentName=[name]_[local]_[hash:base64:5]',
},
{
    loader:'sass-loader',
}];

i also try to use style-loader with ExtractTextPlugin, still not working, anyone can tell me how to fix this up? i will put all my webpack.config.json here for your reference.

const path = require('path');
const glob = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PurifyCSSPlugin = require("purifycss-webpack");

const isProd = process.env.NODE_ENV === 'production';
const PATHS = {
    app: path.join(__dirname, "src"),
};

const MiniCssPlugin = new MiniCssExtractPlugin({
    filename: "[name].css",
});
const PurifyCssPlugin = new PurifyCSSPlugin({
    paths: glob.sync(`${PATHS.app}/**/*.js`, { nodir: true }),
});

const cssDevRules=[
    {
        loader:'style-loader'
    },
    {
        loader:'css-loader?modules&localIdentName=[name]_[local]_[hash:base64:5]',
    },
    {
        loader:'sass-loader',
    }
];
const cssProdRules=[
    {
        loader: MiniCssExtractPlugin.loader,
        // loader:'style-loader'
    },
    {
        loader:'css-loader?modules&localIdentName=[name]_[local]_[hash:base64:5]',
    },
    {
        loader:'sass-loader',
    }
];

console.log("is prod:"+isProd);
const baseConfig = {
    module: {
        rules: [
            {
                test: /\.(css|sass|scss)$/,
                use: isProd? cssProdRules:cssDevRules,
                exclude: /node_modules/,
            },
        ]
    },
};
if(isProd){
    baseConfig.plugins=[
        MiniCssPlugin,
        PurifyCssPlugin,
    ];
}
module.exports = baseConfig;

the production mode is not working , the css generate by MiniCssExtract is empty, anyone can help on this?

frank
  • 31
  • 1
  • 2
  • Does it work when you disable CSS Modules? Can you simplify the config further and see when it breaks? – Juho Vepsäläinen Feb 19 '19 at 17:40
  • yes, i have remove css module, the dev config is working while the production mode not working because i am using MiniCssExtractPlugin.loader instead of style-loader,i try two solutions: 1. i use "extract-text-webpack-plugin": "^4.0.0-beta.0", and style loader, it did extract a seprate css file, but the file is empty 2. i use MiniCssExtractPlugin.loader, and MiniCssExtractPlugin ,the result is the same,css file is empty my github repo is : https://github.com/hyyfrank/webpack4 with branch feature/lesson5, any comment is highly appreciate! – frank Feb 20 '19 at 14:06
  • It might be `PurifyCSSPlugin`. Can you try running without? – Juho Vepsäläinen Feb 20 '19 at 14:11
  • thanks juho, it turn out to be this problem, i remove purifycssplugin and it works! will try to add purifycssplugin in the right way, i might miss something else.Currently,i add css module back and it works too. – frank Feb 20 '19 at 16:06
  • There might be some another way (a plugin) to achieve the same. The benefits of the purify plugin depend largely on the use case. Minifying the CSS may give you the largest benefit with the least effort. – Juho Vepsäläinen Feb 20 '19 at 20:50
  • make senses, i think the problem is where and why we should use the plugin, i still can't find a blog talking about this, and after we know which plugin we should use, the next is how to make them work together, this step really take a lot of time to learn, i still try to make them work together, Thanks for your help Juho~ – frank Feb 24 '19 at 04:45

0 Answers0