有没有办法从后端获取存储的颜色并将它们放在 SCSS 文件中答案

【问题标题】：Is there a way to fetch colors stored from the Back End and place them in SCSS file有没有办法从后端获取存储的颜色并将它们放在 SCSS 文件中
【发布时间】：2020-04-24 23:55:37
【问题描述】：

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

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

颜色存储在 BE 端，所以如果我想对它们做出反应，我必须打电话。如果有人能帮我解决这个问题，我会很高兴的。谢谢你。

【问题讨论】：

为什么要存储在后端？用户可以从您的后台编辑吗？对应用程序上的所有用户来说它是全局的还是可以限定范围的？您对 Internet Explorer 有什么限制吗？
为什么不从后端提供 css 文件？
我认为当您构建应用程序时，scss 会转换为 css。它是一个预处理器。因此，即使可以使用 js 更改 css 文件（我不知道怎么做！）您也无法更改 scss vars，因为它们不再存在
它们存储在BE中，因为不同的用户会使用不同的配色方案。因此，为了让它们动态显示，BE 会为正确的用户发送正确的颜色。
您需要 Internet Explorer 支持吗？

标签： css reactjs sass less

【解决方案1】：

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

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

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

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

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

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

这将基本上解释为：

.mySelector {
    color: #cecece;
}

如果未定义 --primary-color，则返回颜色 black。

您可以想象，后端为前端准备配置非常容易。从您这边（作为前端）您可以简单地使用 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`,
          },
        },
      ],
    }

【讨论】：