Angular: How to parse JSON variables into SCSS

Question

Within an Angular application, I do D3 visuals through either plain D3 or Vega. There\'s also SCSS styling going on.

I\'d like to be able to refer to the same globa

Answer 1

I have a relatively simple approach for you:

Separate the node-sass step form the ng build step and use the generated .css files instead of the sass files in your angular app.

This has two advantages:

• no need to heavily tweak and edit any node-modules
• full control over how the sass is compiled

For the implementation i would go ahead as follows:

1. add ./node_modules/.bin/node-sass --importer node_modules/node-sass-json-importer/dist/cli.js --recursive ./src --output ./src to the scripts in your package.json e.g. with the name build-sass. You can tweak this command to only include the sass files that you need the recursive mode for (make sure to ignore them in the angular.json, so they don't get compiled twice).
2. run the command once npm run build-sass in order to generate the .css files in the project.
3. change references in angular components where needed from the .sass to .css
4. (optionally) add a convenience command npm run build-sass && ng build as compile in your package.json which you can run whenever you want to build the whole project.

While this approach is relatively simple, it comes with a few drawbacks

• for any components where you want to use the css, the hot-reload feature of ng serve will require you to run your npm run build-sass to see any changes you made to your styles in real-time
• your project will look a bit messier, as there are .scss and .css files for the same component in the /src folder of which the .css is generated. You will need to make sure (e.g. by adding a suffix or comment) that noone accidentally edits the generated .css and those changes get overridden.

Other approaches would almost always involve heavily editing existing or writing your own webpack compiler.