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?

score 1 · Answer 1 · answered Mar 31 '21 at 19:42

1

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

answered Mar 31 '21 at 19:42

Frimlik

357
3
15

score 0 · Answer 2 · answered Sep 11 '19 at 13:41

0

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.

answered Sep 11 '19 at 13:41

Alex Vovchuk

2,828
4
19
40

Gosh I'm so sad right now. I had hope this could be possible. Thank you for your answer. Do you think it could be possible to load the css file in typescript and do it programmatically from there ? – Zako Sep 11 '19 at 14:01
I don't think so. But depending on your requirements you could do much logic in css by itself. Especially if you are using preprocessors like less or scss. Css can add, subtract, multiply values, can use @media for different screen conditions. – Alex Vovchuk Sep 11 '19 at 14:12

score 0 · Answer 3 · answered Sep 11 '19 at 15:03

0

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

answered Sep 11 '19 at 15:03

Narm

10,677
5
41
54

1

I'll give this a try and come back to you. – Zako Sep 11 '19 at 15:19
Taking a closer look, I'm not sure it allows me to import my config file into my css. – Zako Sep 12 '19 at 08:26
That is because you need to covert your project from css styles to sass/scss. Like in [this link](https://stackoverflow.com/questions/41428437/angular-cli-generate-sass-project-from-existing-project) – Narm Sep 12 '19 at 15:39

Import JSON config file into styles.css

3 Answers3