Question

我需要在我的react项目中使用webpack版本4和“ mini CSS提取插件”创建多个主题CSS文件。取决于webpack在哪里可以找到SCSS文件的导入，它应该使用loader两次-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文件，您可能希望在构建后清理该文件。

Answer 2

我在使用多主题的Web应用程序上工作，我们通过将每个主题的颜色保存到后端来解决此问题，因此我们可以根据查询从API中获取值，对于样式，我们使用styled-components为此。

我发现在这种问题中css-in-js确实有用。实际上，我们同时使用样式化的组件和LESS CSS。 styled-components用于基于主题的着色，其余部分基于LESS CSS。也许您也可以尝试使用它，或者甚至内联css也可以完成工作，因为JS变量可以解决该问题。

一个特定的示例是构建一个ThemeProvider组件，将整个应用程序作为子组件吞没，ThemeProvider将包含使用styled-components的类声明，并且该类可以是在整个应用程序范围内都可以重用。

Webpack 4：创建多个主题CSS文件

2 个答案: