Question about `load_paths`.

[BToersche]

Hi, a question this time.

I am trying to use the load_paths option in Cargo.toml for some global variables/styling. I've successfully added an SCSS file in the correct folder and this gets picked up by turf. However, while turf picks up and compiles the stylesheet, it does not seem to do anything useful and does not get added to the file specified at file_output. I can see with cargo-expand that the stylesheet does get included in my rust file as follows: const _ = b"<compiled_stylesheet>";, but I am not sure what that is supposed to do. Am I missing something here or is this feature unfinished?

Thanks in advance.

Yours, Bart Toersche

[myFavShrimp]

Hey, the stylesheets get included in the Rust file to add them to Cargo's build system dependency tracking so that changes to SCSS files trigger recompilation. If you want to access the resulting CSS you should always use the ClassName constants, class_names' values or the output files as shown in turf's README. load_paths will only be included in the resulting CSS if they are imported from SCSS files that are fed into turfs macros.

[BToersche]

Ah ok, that makes sense.

I've tried to use it for setting variables. So I have a themes.scss as a global file which has a bunch of --color-var-names. I would like to use those in my local/component stylesheets, which are something like:

.mycomponent {
   color: var(--color-theme-1);
   background-color: var(--background-color-theme-1);
}

The HTML is just something like:

<div class=ClassName::MYCOMPONENT>test</div>

But because the vars in global are not part of the mycomponent class, they won't get included in the resulting file_output. (Same goes for SCSS-style vars btw, like $color-theme-1.)

[myFavShrimp]

You could either accomplish this by using SCSS variables instead like its done in the examples or include your CSS/SCSS file with the global variables using one of turf's macros. This way they should be present in the output file. However, if you use the injected CSS styles (e.g. when rendering HTML on the server) with the second approach, you have to make sure the style sheet with the global variables is injected at the correct location so that it is available from the other style sheets.

[BToersche]

Thanks for answering. I'll close the ticket.