2

我目前正在使用带有 miniCssExtractPlugin 的 css 模块，它已连接它不工作，它确实将 css 提取到一个单独的 css 文件中，但 css 文件是空的。当我使用 style-loader 时，它与 css 模块看起来不错，但它会不要将 css 提取到单独的文件中。

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

但是当我尝试在生产模式下使用 miniCssExtractPlugin 时，生成的 css 文件为空。代码如下：

const cssProdRules=[
{
    loader: MiniCssExtractPlugin.loader,

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

我也尝试将 style-loader 与 ExtractTextPlugin 一起使用，仍然无法正常工作，谁能告诉我如何解决这个问题？我会把我所有的 webpack.config.json 放在这里供你参考。

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;

生产模式不起作用，MiniCssExtract生成的css是空的，有人可以帮忙吗？

4

0 回答 0