CODEWITHSUNDEEP
cssangular
Zako
Zako

Reputation: 151

Import JSON config file into styles.css

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?

Upvotes: 0

Views: 4245

Answers (3)

Frimlik
Frimlik

Reputation: 439

If you are using Angular, you can do it with scss and node-sass-json-importer, like it is described here.

Upvotes: 1

Narm
Narm

Reputation: 10864

Potential Solution: You can convert your Angular application to support SASS and once you've completed that you can accomplish what you want by using the node-sass-json-importer

Upvotes: 0

Alex Vovchuk
Alex Vovchuk

Reputation: 2926

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.

Upvotes: 0

Related Questions