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

Question

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

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

我浏览了以下几个链接，但是不知何故我错过了将此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/

请参考以下我要使用SCSS实现的链接

SassMeister上带有gist的示例代码。

有人可以说出我在这里想念的东西吗？ 另外，我不是CSS的期望者，但可以理解CSS和媒体查询的基本用法。

提前致谢

Answer 1

您确定这些颜色变量必须在json文件中吗？ 如果生成了值：然后将输出格式更改为scss文件。 如果值定义一次（或不是很经常定义）：将它们复制/粘贴到scss文件中。

Answer 2

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

Angular App启动后。 我在后台下载了JSON，并编写了一个文件，进行了一些更改，如下所述。

• 将JSON转换为JSONString。

• 在JSONString之前添加字符串':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); 

• 将filename.scss导入到Angular项目的styles.css文件中。

   @import "themes.scss"; 

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

注意 ：它也可以在Angular的生产环境中使用