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.
Top comments (9)
π₯
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.
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
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.
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
It doesn't work with NX v13
Will 'nx dep-graph' command recognize the dependency of the library in projects?
I don't think so, at least for my case it does appear as a dependency.
Would this work with Nx react project?