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

Then I moved the sass files into the library:

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,
                ...

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;

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';

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.

Comments

[Juri Strumpflohner]

🔥

[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.

[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

[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.

[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

[Mikhail Voronov]

It doesn't work with NX v13

[Ankush Kalia]

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

[Vitor Ferreira]

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

[Ankit Sharma]

Would this work with Nx react project?