2

我的./src目录中到处都是 SCSS 文件，要么是 要么editor-[...].scss，frontend-[...].scss我的目标是设置 MiniCSSExtractPlugin ，使其接收这些scss文件，并根据它是否是editor-或frontend-将其输出到不同的 CSS 文件中。

现在我有

             {
                test: /\.(css|scss)$/,
                use: [ {
                    loader: MiniCssExtractPlugin.loader
                },
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: [
                            require( 'autoprefixer' )
                        ]
                    }
                },
                {
                    loader: 'sass-loader',
                    query: {
                        outputStyle:
                            'production' === process.env.NODE_ENV ? 'compressed' : 'nested'
                    }
                } ]
            },

接着

plugins: [
        new MiniCssExtractPlugin({
            filename: './build/myawesomeapp-editor.css'
        })
]

我似乎无法弄清楚，如何设置两个输出。我知道我必须使用正则表达式来查找文件，但我不知道如何在我完成之后将它们提取到不同的文件中。

4

1 回答 1

1

我知道这个问题现在有点老了，但我自己花了几天时间试图解决这个问题。诚然，在这个阶段我对 webpack 了解不多，所以它确实花费了比应有的时间更长的时间。

我最终做的是这里指定的 https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-css-based-on-entry

我如何实现它是创建一个配置 json 文件，其中包含需要使用的 scss 文件列表

{
   "file1": {
      "scss": "file1",
   },
   "file2": {
      "scss": "file2",
   },
}

（为什么我的特定设置在这里不使用数组是有原因的）

然后在我的webpack.config文件中，我有以下内容

const themeConfig = require('./src/config/themes.json');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const _ = require('lodash');

然后我循环配置以创建特定于主题的拆分块配置

// specify the theme split chunk config
let themeChunks = {};
let themeFiles = [];
for (let i in themeConfig) {
  const theme = themeConfig[i];
  themeChunks[_.camelCase(`theme_${i}`)] = {
    name: `theme-${theme.css}`,
    test: new RegExp(`src\/resources\/styles\/themes\/${theme.css}.scss$`),
    chunks: 'all',
    enforce: true,
  };

  themeFiles.push(`./src/resources/styles/themes/${theme.css}.scss`);
}

注意：测试行应该是你的 scss 文件的路径

然后我的条目看起来像这样

entry: {
    app: ['./src/app.js'],
    themes: themeFiles
  },

我的分割块看起来像这样

splitChunks: {
  hidePathInfo: true, 
  chunks: "initial",
  maxSize: 200000, 
  cacheGroups: {
    default: false,

    // add the theme config
    ...themeChunks,
  }
}

最后是我的规则


{
  test: /\.scss$/,
  use: [
    { loader: MiniCssExtractPlugin.loader, },
    { loader: 'css-loader' },
    { loader: 'sass-loader' }
  ],
},

这是基于dwatts3624 https://github.com/webpack-contrib/mini-css-extract-plugin/issues/45#issuecomment-425645975中的示例

我希望这对遇到这个问题的人有所帮助

于 2019-06-20T05:39:40.440 回答