Import JSON config file into styles.css

Question

I have an Angular solution, and I would like to import a config.json file into the "styles.css" file. I don't even know if that is possible, because I did not find anything like this by searching for similar issues.

Here's what the config.json file looks like:

{
    "style" : {
        "primaryColor": "#008080",
        "secondaryColor" : "#D32F2F"
    }
}

Here's what the styles.css looks like:

import * as config from 'config.json'; 

html {
        font-family: 'Trebuchet MS';
        background-color: '$config.style.primaryColor';
    }

As you can guess, this does not even compile. But I hope you guys get the idea of what I'm trying to do. Do you have any idea how to achieve that?

Answer 1

Unfortunately you can't do so.

You could use config in your component code and assign css from there. Like:

<div [style.width.px]="yourValueFromConfig">

where yourValueFromConfig - variable in component assigned from config.

Answer 2

潜在的解决方案：您可以将 Angular 应用程序转换为支持 SASS，完成后您可以使用node-sass-json-importer完成您想要的操作

Answer 3

如果您使用的是 Angular，则可以使用scss和node-sass-json-importer 来完成，就像这里描述的那样。