css - 网络包 4 : Create multiple theme css files

Question

我需要在我的 React 元素中使用 webpack 版本 4 和“迷你 CSS 提取插件”创建多个主题 CSS 文件。取决于 webpack 将找到 SCSS 文件导入的位置，它应该使用加载程序两次 - 在 sass-loader 选项中使用不同的数据。

根据这个目标，我在互联网上找不到任何有用的东西。我也已经尝试使用 webpack 的加载器，如:webpack-combine-loaders、multi-loader 等......

这里是webpack配置的一部分

module: {
  rules: [
    {
       test: /\.scss$/,
       use: [
         {
           loader: MiniCssExtractPlugin.loader,
         },
         'css-loader',
         {
            loader: "sass-loader",
            options: {
               data: '$theme: dark;',
            }
         },
       ],
     },
     { // the same except data in options
       test: /\.scss$/,
       use: [
         {
           loader: MiniCssExtractPlugin.loader,
         },
         'css-loader',
         {
            loader: "sass-loader",
            options: {
               data: '$theme: white;',
            }
         },
       ],
     },
  ],
},
plugins: [
  new MiniCssExtractPlugin({
    filename: 'client.white.css',
  }),
  new MiniCssExtractPlugin({ 
    filename: 'client.dark.css',
  }),
],

在我的 scss 文件 (button.scss) 中，我使用了这样的条件:

$background: #06cc1a;
$color: white;

@if $theme == dark {
  $background: white;
  $color: black;
}

.button {
    background-color: $background;
    color: $color;
  }
}

因此，我想获得两个 CSS 文件 client.white.css，其中为白色主题应用了 sass 变量，而 client.dark.css 为深色主题应用了变量

Answer 1

我们在元素中通过使用多个入口点解决了这个问题，每个入口点一个，例如:

entry: {
    light: './src/css/light.scss',
    dark: './src/css/dark.scss'
}

light.scss文件内容如下:

$background: #001560;    

@import "~base/scss/base.scss";

Webpack 将为每个主题输出一个单独的 css 文件，其中包含所有样式，包括基本样式和特定于主题的样式，这在优化生产时非常有用。

请注意，您还会得到一个冗余的 JS 文件，您可能希望在构建后清理该文件。