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

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>

然后在你的 scss（或 css）上你可以做类似的事情：

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

这将基本上解释为：

.mySelector {
    color: #cecece;
}

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

如你所想，后端为前端准备配置是非常容易的。从你这边（作为前端）你可以简单地使用 CSS API 工具上已经可用的东西。

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

Goal is to spawn webpack sass compilation, on each User color change, to build css output with relevant variable configuration.

为此你需要 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 文件中

Is there a way to fetch colors stored from the Back End and place them in SCSS file

css

sass

less

reactjs