Can I export Sass variables and import them into a Angular Typescript variables?

user_1404049 0
Viewed 2184

I have been looking at this for awhile. I have my application right now as it is. We have variables defined in the scss for coloring. I am trying to import the variables into Typescript so I could submit them to servers.

I have a bunch of font and color strings in my Angular component, but i figured to push them into a scss file as it is used for design. The issue is that I dont know how to fetch the colors.

I saw some people doing something similar in Javascript, but I have currently been unable to reproduce it in Typescript.

Ideally, I want do do:

Scss:

:export { myVariable:#ffffff; }

NGTypescript:

import {styles} from "./styles.scss";

and then do something akin to:

onPostRequest(){ let color = styles.myVariable; ... }

When i get to the import line above, it will state: Cannot find module './icon-picker.component.scss'.ts(2307)

I have seen in similar examples like React, which does similar, but i am having issues also porting that concept to Angular. https://github.com/css-modules/css-modules/issues/86 shows concepts I was noticing. Here is also a Javascript walkthrough which seems to also have issues with: https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript

angular typescript sass
1 Answers

Have you tried to define the colors as variables in src/styles.scss, linking them up with CSS selectors and referencing these selectors in the component html file?

For example:

$primary-color: #333;
$secondary-color: #777;
.primary-color {
   color: $primary-color;
}
.secondary-color {
   color: $secondary-color;
}

And then in your html component:

<p class="primary-color">Text with primary color</p>
<p class="secondary-color">Text with secondary color</p>

For your interest you can also change the component css to scss by renaming the *.css and updating the StyleUrls reference in the component ts file.

user_59243150
Related