在 Angular 8 环境中将配色方案 JSON 列表添加到 Scss 文件

Question

我正在使用 Angular 构建一个基于 Web 的项目 8. 在应用程序开始时，我需要检索 JSON 文件中定义的预定义配色方案列表，并且我有将它们动态添加到应用程序中。配色方案 JSON 如下所示：

    {
      "bar": "#FFFFFF",
      "text_small": "#FFFFFF",
      "text_nav_header": "#FFFFFF"
       ............ ...........
       ........... ...........
    }

我已经经历了一些 link 如下所示，但不知何故我错过了将这个 JSON 导入 SCSS 处理的要点。

https://scotch.io/tutorials/angular-shortcut-to-importing-styles-files-in-components

https://medium.com/@dmitriy.borodiy/easy-color-theming-with-scss-bc38fd5734d1

https://css-tricks.com/making-sass-talk-to-javascript-with-json/

https://www.viget.com/articles/sharing-data-between-sass-and-javascript-with-json/

请参考下面link我想用SCSS

实现

Sample code with gist on SassMeister.

有人可以通过一些光线了解我在这里缺少的东西吗？另外，我不是 CSS 的期望，但可以理解 CSS 和媒体查询的基本用法。

提前致谢

Answer 1

您确定这些颜色变量必须在 json 文件中吗？如果生成值：则将输出格式更改为 scss 文件。如果值只定义一次（或不经常定义）：copy/paste 它们到 scss 文件。

Answer 2

以下是我使用 Angular 和后端脚本实现它的步骤。

应用程序启动后Angular。我在后台下载了 JSON 并编写了一个文件，其中的改动很少，如下所述。

将 JSON 转换为 JSON 字符串。
在JSON字符串前添加一个字符串':root'。

在Python中：
```
data = ":root %s" % jsonString
```
在PHP中：
```
$data = ":root ". $jsonString;
```

替换字符串中的几个字符如下：

在Python

data = data.replace('\"', '')
data = data.replace(',', ';')

在PHP中：

$data = str_replace('\"', '', $data);
$data = str_replace(',', ';', $data);

将文件写入 Angular 项目的 src 文件夹。在 Python:

f = open("src/themes.scss", "w+")
f.write(data)
f.close()

在PHP中：

$fp = fopen('src/themes.scss', 'w');
fwrite($fp, $data);
fclose($fp);

在 Angular 项目的 styles.css 文件中导入 filename.scss。
```
@import "themes.scss";
```

因此，我如何生成带有 JSON 颜色代码的 dynamic scss file。它看起来很奇怪，但是是的，它就像一个魅力。

注意：在Angular的生产环境下同样有效

在 Angular 8 环境中将配色方案 JSON 列表添加到 Scss 文件

Add Color Scheme JSON list to Scss file in Angular 8 Environment

css

sass

typescript

scss-mixins

angular8