How to share SASS styles between libs inside my NX monorepo?

Question

I'm trying to build a component library for angular and react. That's why I want to use the same styles(sass) for both libs. I created a separate folder for my styles and included my main sass inside the component. but when I try to make a test npm build and tried to use inside an angular project I paced this problem

how can I solve this?

Lind

Answer 1

as found in this blogpost.

create a lib for styles

nx generate @nrwl/angular:library ui

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

Plumcot

though it can build but IDEs won't recognise it in the lib scss. – Litchfield

Answer 2

Solution for Nx (v20.0.0) and Angular (v18.1.1) Project with SCSS Configuration

If you're working with a project structure similar to the one below and want to configure SCSS across your Angular apps and shared libraries, here's a working setup.

Project Structure:

- apps
  - app1
    - src
      - app
        - app.component.scss
      - styles.scss
    - project.json
- libs
  - shared
    - styles
      - src
        - lib
          - base
            - _variables.scss
            - _mixins.scss
            - index.scss
          - material
            - _button.scss
            - index.scss
          - styles.scss
      - project.json
    - ui
      - src
        - lib
          - ui.component.scss

Configuration Steps:

1. Update the project.json in your application (apps/app1/project.json) to include the shared style paths:

   {
     "targets": {
       "build": {
         "executor": "@angular-devkit/build-angular:application",
         "options": {
           "inlineStyleLanguage": "scss",
           "assets": [...],
           "stylePreprocessorOptions": {
             "includePaths": ["libs/shared/styles/src/lib"]  // <-- Make sure this path is correct
           },
           "styles": [
             "node_modules/@angular/material/prebuilt-themes/azure-blue.css",
             "apps/app1/src/styles.scss",
             "libs/shared/styles/src/lib/styles.scss" // <-- Ensure correct path here as well
           ]
         }
       }
     }
   }
   

2. Setting Up SCSS in the Shared Library:

   • In the shared library’s SCSS files, forward the necessary files. For instance:

     • libs/shared/styles/src/lib/base/index.scss:

       @forward './variables';
       @forward './mixins';
       

     • libs/shared/styles/src/lib/material/index.scss:

       @forward './button';
       

     • libs/shared/styles/src/lib/styles.scss:

       @forward './base/index';
       @forward './material/index';
       

3. Referencing SCSS Variables and Mixins in Application Styles:

   • In your global styles (apps/app1/src/styles.scss), include the shared SCSS files:

     @use 'base/variables' as *;
     @use 'base/mixins' as *;
     

   • Similarly, in your component styles (apps/app1/src/app/app.component.scss), use the same references:

     @use 'base/variables' as *;
     @use 'base/mixins' as *;
     

4. Referencing SCSS Variables and Mixins in other shared libraries:

   • In your ui component styles (libs/shared/ui/src/lib/ui.component.scss), use the same references:

   @use 'base/variables' as *;
   @use 'base/mixins' as *;
   

Goliard

Answer 3

Import the files with a path relative to the workspace root:

@import "libs/your-lib/src/styles/whatever"

Anthill