How to share styles between non-buildable libraries

[Cabinet20]

Hi,

We have a structure, for our Nx Workspace like this:

apps
|-- main
libs
|-- features
|   |-- component-a (non-buildable)
|   |-- component-b (non-buildable)
|-- shared
|   |-- ui
|   |   |-- core (contains design components)
|   |   |-- styles (just contains the styles)

I want to access the styles lib from component-a, a non-buildable feature component. Because the feature component is non-buildable, it does not get a package.json file and therefore I am unable to add an assets element to this.

Is the only way to reference create a root style file and then import the styles like this:

@import '../../../../../../shared/ui/styles/src/lib/scss/styles';

PS. Ignore the exact number of ..s. I just guessed for this example.

This kind of pathing seems quite ugly. Also, I cannot add a style path, again, due to the lack of package.json file.

Thanks!

[asherccohen]

I'm wondering the same, is there no solution?

[devzom]

There is a partial solution for it: #22622 (comment)

[Roesler]

Did anyone solve this? Im stuck in the same place 2023...

[nikrou]

It's certainly not the better solution but you can add stylePreprocessorOptions entry in targets > build > options of your project.json file.
Something like that :

"stylePreprocessorOptions": {
   "includePaths": ["libs/shared/ui/styles/src/lib/scss"]
},

[Roesler]

@nikrou yea, I figured out that way too. But If you have a app with around 60+ bigger libs and even more nested modules in there, then it would be really nice with a short relative path to a shared variables.scss for it, instead of hard writing every import or in this case write the url in includePaths.