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

Posted 2023-02-22

【中文标题】webpack 4：创建多个主题 css 文件

【英文标题】：webpack 4: Create multiple theme css files

【发布时间】：2019-09-04 20:11:14

【问题描述】：

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

根据这个目标，我在 Internet 上没有发现任何有用的东西。我也已经尝试过使用 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，其中应用了深色主题的变量

【参考方案1】：

我们在项目中通过使用多个入口点解决了这个问题，每个主题一个入口点，例如：

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

light.scss 文件内容如下：

$background: #001560;    

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

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

请注意，您还会得到一个多余的 JS 文件，您可能需要在构建后清理它。

【讨论】：

这是可能的解决方案之一，但是创建冗余 js 文件的情况有点烦人。在我们的项目中，我们必须编写自己的带有插件的 webpack 加载器来解决这个问题

确实 js 文件很烦人

@AvrelDusop 你在 Github 上有那个加载器吗？

@ItayGanor 这个问题（和接受的答案）有一个例子：***.com/a/39401288/195306

【参考方案2】：

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

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

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

【讨论】：

Styled-components 这绝对不是一个好主意，一团糟。让我们分离css和js组件。

我实际上同意你的看法，我也鄙视样式组件，但它成功了，所以我留下了@AvrelDusop