webpack4 使用 mini-css-extract-plugin 提取less 为何只能提取到公共less样式？

Question

使用 mini-css-extract-plugin 插件提取css样式时只能提取到公共的css样式，其他样式都没有

const MiniExtract = require('mini-css-extract-plugin')
module.exports = {
    //...
    plugins: [
        new MiniExtract({
            filename:'css/[name].css'
        }),
    ],
    module: {
        rules: [
            {
                 test: /\.less$/, use: [{
                    loader: MiniExtract.loader,
                    options: {
                        publicPaht: '../' 
                    }
                }, 'css-loader', 'less-loader']
            }
        ]
    },
    //...
}

如何才能提取到所有的css样式？

完整的webpack

const path = require('path')
const WebHTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const pruifyCssWebpack = require('purifycss-webpack')
const globAll = require('glob-all')
const vueLoader = require('vue-loader/lib/plugin')
const MiniExtract = require('mini-css-extract-plugin')
module.exports = {
    entry: path.resolve(__dirname, './src/main.js'),
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[name].bundle.js',
        chunkFilename: 'js/[name].[hash:8].js',
    },
    plugins: [
        new WebHTMLPlugin({
            template: path.resolve(__dirname, './src/index.html'),
            filename: 'index.html',
            hash: true,
            minify: {
                collapseWhitespace: true,
                removeAttributeQuotes: true
            }
        }),
        new MiniExtract({
            filename:'css/[name].css'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new pruifyCssWebpack({
            paths: globAll.sync([
                path.resolve(__dirname, './src/index.html'),
                path.resolve(__dirname, './src/main.js')
            ]),
            minimize: true
        }),
        new vueLoader(),
        new webpack.ProvidePlugin({
            Vue: ['vue', 'default'],
            VueRouter: ['vue-router', 'default'],
            axios: ['axios'],
            $: path.resolve(__dirname, './src/common/base.js'),
            Vuex: ['vuex', 'default'],
            store: path.resolve(__dirname, './src/store.js'),
        })
    ],
    devServer: {
        disableHostCheck: true,
        open: true,
        port: 8000,
        host: 'localhost',
        hot: true
    },
    module: {
        rules: [
            {
                test: /\.css$/, use: [{
                    loader: MiniExtract.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader']
            },
            {
                test: /\.jpg|png|jpeg|gif$/, use: {
                    loader: 'url-loader',
                    options: {
                        limit: 1000,
                        outputPath: 'images',
                        name: '[hash:8]_[name].[ext]'
                    }
                }
            },
            {
                test: /\.less$/, use: [{
                    loader: MiniExtract.loader,
                    options: {
                        publicPaht: '../' 
                    }
                }, 'css-loader', 'less-loader']
            },
            {
                test: /\.js$/, use: 'babel-loader', exclude: /node_modules/
            },
            {
                test: /\.vue$/, use: 'vue-loader'
            }
        ]
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                common: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'common',
                    enforce: true
                }
            }
        },
        runtimeChunk: {
            name: 'manifest'
        }
    },
    performance: {
        hints: false
    }
}

Answer 1

所有样式相关的都得配 MiniExtract.loader 吧，你的 css 文件也加上试试。

Answer 2

请问问题解决了吗？我也遇到同样的问题