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

Question

I'm building a Web based project with Angular 8. At the starting of the Application, I need to retrieve a list of predefined colour scheme defined in a JSON file and I have to add them dynamically to the Application. The colour scheme JSON looks like as below:

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

I have gone through few links as below but somehow I'm missing the point to import this JSON to the SCSS processing.

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/

Please refer to the below link that I want to achieve with SCSS

Sample code with gist on SassMeister.

Can somebody through some light that what I'm missing here? Also, I'm not an expect in CSS but can understand the basic use of the CSS and media queries.

Thanks in Advance

Answer 1

Are you sure that these color variables have to be inside a json file? If the values are generated: then change the output format to a scss file. If the values are defined once (or not very often) : copy/paste them to a scss file.

Answer 2

Here are the steps that I work out with the Angular and backend script to achieve it.

After Angular App is started. I downloaded the JSON in the background and written a file with few changes as mentioned below.

• Convert the JSON to JSONString.

• Add a string ':root' before the JSONString.

  In Python:

   data = ":root %s" % jsonString 

  In PHP:

   $data = ":root ". $jsonString; 

• Replace few character in the string as below:

  In Python

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

  In PHP:

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

• Write a file to the src folder of the Angular project. In Python:

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

  In PHP:

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

• Import the filename.scss in your styles.css file of your Angular project.

   @import "themes.scss"; 

Thus how I have generated the dynamic scss file with a JSON of color codes. It look weird but yes, it works like a charm.

Note : It works in production environment of Angular as well