Question

目前，我正在重构我的代码。因此，这意味着更高的清晰度和更高的维护要求。我脑子里有个主意，但不幸的是我不知道如何实现。为了更清洁，更有效，我想创建一个隔离的_colors.scss文件，其中将包含应用程序的所有颜色。换句话说，我希望它看起来像这样 $colorPrimary: branding.colorPrimary, $colorSecondary: branding.colorSecondary ... 目前这很混乱，因为颜色样式在组件级别进行维护，但是我想单独进行此操作。例如：

<button style={
   color: branding.colorPrimary,
   background: branding.colorSecondary>
Hello
</button>

颜色存储在BE一侧，因此，如果我想对它们做出反应，我必须打电话。如果有人可以帮我这个忙，我会很高兴。谢谢。

Answer 1

要实现此行为，您有两种主要方法。第一个描述与Internet Explorer不兼容。

在W3C上描述的最新CSS版本中，我们可以直接在CSS上使用变量。

像这个后端一样可以做这样的事情：

<head>
    <style type="text/css">
        :root {
          --primary-color: #cecece;
          --secondary-color: #fefefe;
        }
    </style>
</head>

然后在您的CSS（或CSS）上可以执行以下操作：

.mySelector {
   color: var(--primary-color, black);
}

基本上将解释为：

.mySelector {
    color: #cecece;
}

或者如果未定义black，则颜色为--primary-color的后备广告。

您可以想象，后端很容易为前端准备配置。从您的角度（作为前端），您可以简单地使用CSS API工具上已经提供的功能。

但是，如果您正在寻找与IE兼容的产品。您可能需要更复杂的基础架构。

目标是在每次用户颜色更改时生成webpack sass编译，用相关的变量配置构建CSS输出。

为此，您将需要SaSS ressource loader，该文件会自动将sass文件注入所有其他文件。就像自动添加@import "_colors"。

那么后端服务器将必须：

将_color.scss文件写入某处（比如说/user/123/_color.scss）
要求像webpack client 123这样的编译方式
读取客户端123的输出webpack文件夹，并检测是否存在特定的CSS
在您的头上插入HTML。

用于Webpack配置

在您的Webpack中，您将看到类似

的内容：

   const argv = require("yargs").argv;
    entry: {
        [...]
    },
    output: {
      // Take the argument as clientId and craft dedicated output folder.
      path: helpers.root(`public/themes/front/${argv.client}`), 
      filename: "[name].[contenthash].js",
      chunkFilename: "[name].[contenthash].js"
    }

基于客户端ID，您将把输出的CSS存储在特定的文件夹中。

最后，SaSS规则如下所示：

 {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            resources: (argv.client) ? `/user/${ argv.client }/_color.scss` : `/user/default/_color.scss`,
          },
        },
      ],
    }

有没有一种方法可以从后端获取存储的颜色并将其放置在SCSS文件中

1 个答案: