DEV Community

Vitor Ferreira
Vitor Ferreira

Posted on • Edited on

Sharing styles between apps inside Nx workspace

In my current job we have decided to make the change into Nx workspace and with that we decided to create our very own Design System.

But I didn't want to maintain the same styles in more than one application.

Creating a lib for styles

The best solution for my case was to create a lib named ui for the styles:



nx generate @nrwl/angular:library ui


Enter fullscreen mode Exit fullscreen mode

Then I moved the sass files into the library:
alt text

The problem now, is the @import in all the scss files.
How to make them recognize the correct files?
On angular.json on every project the path will have to be included.



"projects": {
    "ds-project": {
        "projectType": "application",
        ...
        "architect": {
            "build": {
                ...
                "stylePreprocessorOptions": {
                    "includePaths": [ "libs/ui/src/lib/styles" ]
                },
                "extractCss": true,
                ...


Enter fullscreen mode Exit fullscreen mode

Now you can import the mixins on the scss files of your project just like if they were still part of the project:



@import "mixins/list_mixin";
@import "variables";

@include list_layout;


Enter fullscreen mode Exit fullscreen mode

Even the base style, like font-family are importable.

Inside the style.scss of the project to became the global styles (for this case the module contains the global styles).



// styles.scss
/* You can add global styles to this file, and also import other style files */

@import 'module';


Enter fullscreen mode Exit fullscreen mode

alt text

Conclusion

This solves easily a problem that could be an issue and I was somehow afraid to tackle, that is having global scss files shared between applications and easily maintainable with only one source of truth (the library).

If you have any suggestion of how I could do this differently, please share your ideas.

Top comments (9)

Collapse
 
juristr profile image
Juri Strumpflohner

πŸ”₯

Collapse
 
diomededavid profile image
David Diomede

It's not clear to me how to use:
"stylePreprocessorOptions": {
"includePaths": [ "libs/ui/src/lib/styles" ]
},

Are you using scss partials in the project src folder or the library? I get not a string errors when using partials from the library folder.

Collapse
 
_puffancs profile image
GergΕ‘ Nagy

why did you generate a lib for this?
I am about to solve the same issue but I am tempted to use a simple styles directory in the libs folder for this

Collapse
 
codergamer profile image
Pankaj Yadav

I am not able to make it work using above code. What i want to do is have a shared ui library and import just the needed styles in my app and other libraries.

Collapse
 
vitorstick profile image
Vitor Ferreira

that is similar to the issue that I had, and to solve it I created a lib just for those shared styles, but that was for using in applications.
To use in other libs, I had to import using the path, like:
@import 'libs/shared/otherlib/src/scss/settings/colors';

Don't know if there is another solution

Collapse
 
dontomato profile image
Mikhail Voronov

It doesn't work with NX v13

Collapse
 
ak274 profile image
Ankush Kalia • Edited

Will 'nx dep-graph' command recognize the dependency of the library in projects?

Collapse
 
vitorstick profile image
Vitor Ferreira

I don't think so, at least for my case it does appear as a dependency.

Collapse
 
ankuradhey profile image
Ankit Sharma

Would this work with Nx react project?