使用 webpack 5 将主题提取到不同的 css

问题描述

我正在尝试提取不同的 scss 条目以分隔 css 包文件

我的文件夹结构类似于：

• 源代码
  • 主题
    • red.scss
    • blue.scss
  • index.js

red.scss 和 blue.scss 正在导入其他（相同的）.scss 文件

index.js 不导入任何 .scss

我希望我的输出是：

• index.js 或 bundle.js
• blue.css
• red.css

我使用 minicssextractplugin 来完成这项工作，但我得到的是：

• index.js
• blue.js
• red.js

使用了很多教程，但大多数都与 webpack 4 兼容。 使用优化、splitChunks、cacheGroups 等 各种不同的入门案例

我的依赖项是：

  entry: {
            red: path.resolve(__dirname,'src/themes/red/'),blue: path.resolve(__dirname,'src/themes/blue/'),},//devtool: 'source-map',//entry: './src/index.js',//entry: ['./src/index.js','./src/css/index.scss'],//entry: {
        //    //default: './src/default.js',//    blue: './src/themes/blue',//    red: './src/themes/red'
        //},//entry: {
        //    //index: './src/index.js',//    //main: './src/index.js',//    //styles: ['./src/themes/red.scss','./src/themes/default.scss','./src/themes/blue.scss']

        //    default: ['./src/default.js','./src/themes/default.scss'],//    red: ['./src/red.js','./src/themes/red.scss'],//    blue: ['./src/blue.js','./src/themes/blue.scss'],//},

我无法在这里复制我的 webpack.config.js，出现格式错误 以下是部分内容：

  output: {
            path: path.resolve(__dirname,'wwwroot/dist'),filename: '[name].js'
            //sourceMapFilename: '[name].js.map'
          },

 optimization: {
            splitChunks: {
                cacheGroups: {
                    redStyles: {
                        name: 'styles_red',test: (m,c,entry = 'red') =>
                            m.constructor.name === 'CssModule' &&
                            recursiveIssuer(m,c) === entry,chunks: 'all',enforce: true,blueStyles: {
                        name: 'styles_blue',entry = 'blue') =>
                            m.constructor.name === 'CssModule' &&
                            recursiveIssuer(m,

module: {
            rules: [

                {
                    test: /\.s[c|a]ss$/,include: path.resolve(__dirname,'src'),use: [
                        devMode ? 'style-loader' : MiniCssExtractPlugin.loader,'css-loader','sass-loader',]
                },//{
                //    test: /\.js$/,//    include: path.resolve(__dirname,//    loader: 'babel-loader',//    options: {
                //        presets: ["@babel/preset-env"],//        plugins: ['@babel/plugin-proposal-object-rest-spread']
                //    }
                //},{
                    test: /\.(png|jpg)$/,use: {
                        loader: "file-loader"
                    }
                }
            ]
        }

 plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',jQuery: 'jquery'
            }),//new FixStyleOnlyEntriesPlugin(),new MiniCssExtractPlugin({
                filename: "[name].css",}),//new MiniCssExtractPlugin({
            //    filename: "[name].css",//    //chunkFilename: "[name].css"
            //})
            //new MiniCssExtractPlugin({
            //    filename: '[name].css'
            //}),//defaultTheme,//redTheme,//blueTheme
        ]

{{1}}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）