webpack 4：创建多个主题 css 文件

Question

我需要在我的 React 项目中使用 webpack 版本 4 和“迷你 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

我开发了一个使用多主题的网络应用程序，我们通过将每个主题的颜色保存到后端来解决这个问题，这样我们就可以根据查询从 API 获取值，对于样式，我们使用styled-components它。

我发现 css-in-js 对于此类问题非常有用。实际上，我们使用样式组件和 LESS css 来进行样式设置。styled-components用于根据主题进行着色，其余的在 LESS css 上。也许你也可以尝试使用它，或者甚至内联 css 也可以完成这项工作，因为 JS 变量可以解决这个问题。

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