почему модуль CSS не работает, когда я использую minicssExtractPlugin? - PullRequest
Новая
       44

почему модуль CSS не работает, когда я использую minicssExtractPlugin?

0 голосов
/ 19 февраля 2019

В настоящее время я использую модуль css с miniCssExtractPlugin, он подключен, он не работает, он извлекает 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;

режим производства не работает, css, генерируемый MiniCssExtract, пуст, кто-нибудь может помочь в этом?

...