How to share styles across publishable libs?

[vroh17]

Description

I have a monolithic app and now I split it into publishable libs which I am going to use in that app.
There are some common styles like variables and mixing in main app. And I want to reuse that styles into my libs.
I have tried to move styles into separate lib and I was able to reuse them in main app through configuration in angular.json (stylePreprocessorOptions) but I can't use these styles in other libraries.
Is there any ideas how can I manage this situation?

[imcvakt]

I'm facing the same issue!

For example I have one specific library e.g: "subscriptions".

I would like to publish that library to re-usable into a legacy project that my company still maintains. However, that library can't have any other dependency inside my new Nx workspace

[adgoncal]

I ran into this same issue.
I want to import a scss file from libs/shared/styles in libs/shared/ui. stylePreprocessorOptions is not available in the shared-ui lib builder ("@nrwl/angular:package"), and adding styleIncludePaths to shared-styles lib's ng-package.json throws the following error when building shared-ui lib:

ERROR: Configuration doesn't match the required schema.
Data path ".lib" should NOT have additional properties (styleInlcludePaths).

This is related to the discussion in #1542

[psycho063]

Same issue here. I have started a monorepo project and am trying to use the variables from the shared "styles" library inside another library. Are there any updates on how this should be best handled?

[dzena]

I have the same issue. In my humble opinion, this is a pretty standard use-case (having a styles lib shared across apps/libs). We have a huge nx workspace and rebuilds sometime take up to 2mins, so I decided to take advantage of incremental build using buildable libs. Unfortunately, the build fails do the reason mentioned in the first post.
Any new ideas how to go about this issue?

[yharaskrik]

I am also facing this issue. Only when building a buildable lib that uses a shared style sheet.

[ludicast]

I just posted on the nrwl/community slack my opinion that syncing/linking your included package with the top-level node_modules works and feels "correct" (was mentioned to me there as a strategy). Like you are going behind the back of Nx but at least adhering to node conventions. and then your scss can @import "@company/libname/styles/helper.scss"

stylePreprocessorOptions feels wrong, because it requires a developer inside the monorepo to be a monorepo developer (e.g. to figure out what a relative path is relative to) and this will be a bigger issue imho as Nx embraces a bigger tent of applications. On the flip side, I'm not sure how that would tie in as Nx reaches beyond JS/TS...

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[yharaskrik]

I believe this is still an issue.

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[yharaskrik]

This is still an issue to my knowledge.

[jberndsen]

I am also running into this exact use-case. I want to use NX to manage a component library. It should also expose global css (for example for theming), much like Angular Material does. Right now, it does not seem feasible to have a publishable library per component which use shared styles.

[skwny]

Same. This is a common use case when styles apply across multiple libs (e.g. shared/ui, shared/feature, app/feature, etc).

[tommck]

Honestly, I think we should have a built-in "@nrwl/angular:style-library" schematic or something like that. Having to guess and try various things is disappointing

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[c-fos]

This is still an issue

[ghost]

I also haven't found a solution to this problem. Currently moving from a vue 2 project to a vue 3 project, and I haven't found any solution as to sharing stylesheets from libraries to apps.

[csaszika]

+1 still useful feature would be

[kingjordan]

for what it is worth, i added a scss import from the main "APP" to the shared ui lib styles.scss file like:

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

While the styles are built into the app, the styles get rebuilt with every change during nx serve.
What I would like is a way for a buildable shared ui lib that contains scss so that I don't have to rebuild my scss files every time I serve the app. the scss build is the longest part of the build process. maybe this is not possible. I have not tried a publishable lib yet.

I tried adding the stylePreprocessorOptions and the styleIncludePaths to my buildable shared ui lib project.json file. but I got the error that those values are not found in the schema., also, adding the entry point to the ng-package.json file did not work.

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[bulldog98]

this is still a valid problem without any satisfying solution

[georgyevv]

How come this thing is not solved for an absolutely must-have feature? I managed to make it work only with relative path.

[mscandan]

The solution I've come up with just creating a new package in libs folder and adding it as local dependency in root package.json

structure:

then I ran yarn add file:<path-to-folder> in the root folder of monorepo.

It added it and I am able to use it across different applications

[FrozenPandaz]

I've converted this to a discussion so it can take advantage of Github features there.

I'm having trouble discerning some actionable request here. While sharing styles is important, there are many ways to go about it.

Compiling a globals.css to be included for many different components is very different than writing sass modules which can be reused in other sass code.

Along with this general discussion, I feel like it may be useful to open new discussions about distinct use cases. I think from those more focused discussions, they have a higher chance of yielding actionable ways which Nx can help here.

[bulldog98]

My main use case is that I have material like components, that use the theme your own components aproch. Here I want to have my scss mixin to be imported the same way I would the component. By writing @myorg/mylib and then selecting my component. (Maybe from a secondary entrypoint, but that is not really relevant for the discussion)

[nhhockeyplayer]

they have a nice defacto standard for assets here
https://www.youtube.com/watch?v=LYjX2V-eQa8

and I thought back when this vid was created there was a complimentary video for styles too
but I cannot find it anywhere

so I designed my own called @nhhockeyplayer/shared-root-ui-styles
builds and publishes fine
https://github.com/users/nhhockeyplayer/packages/npm/package/shared-root-ui-styles
its usable in MFE apps, remotes and hosts
but I need my reusable styles inside my libraries too

funny thing is I cannot @use it into any of my nx libraries... widget libs or component libs

NX   Can't find stylesheet to import.

  ╷
9 │ @use '@nhhockeyplayer/shared-root-ui-styles';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  libs/shared/feature/chat/src/lib/chat/chat.component.scss 9:1  root stylesheet

styles or stylePreprocessorOptions
NX 'stylePreprocessorOptions' is not found in schema
so Im unable to use my styles across all my Nx libraries

is this a design shortfall?

did I create my @nhhockeyplayer/shared-root-ui-styles for nothing?

or is this thread dedicated for this omission
thanks for any clarification

[nhhockeyplayer]

these kinds of imports are a violation
@import '../../../libs/shared/ui/src/lib/styles/styles.scss';

this should have been solved years ago

whats going on Nx team?

Im ahead of the steam and cannot run with this yet

my SASS design system

cannot even be shared across Nx libraries ? this is NOT Nx culture ethics or standards and should be fixed immediately

can anyone give a status on this

please

workaround?

is anybody home?

[tocw86]

Hi , look on my post, maybe answear that you neeed :-)

[tocw86]

Maybe this solution will be useful to someone:

To import global layout css in your project my-app:

apps/my-app/src/styles.css
@import '@angular-monorepo/styles';

We define the path to the global css file in the tsconfig.base.json:

"paths": {
      "@angular-monorepo/styles": ["libs/shared/scss/style.css"],
    }

Make sure to add in my-app project.json::

"production": {
  ....
 "styles": ["apps/my-app/src/styles.css"],
}

[pwnball]

this does not work for me with nx v 19 .0.1, atleast using scss, I havent tested .css as that is not relevant to my client.

[ERROR] Can't find stylesheet to import.

[tocw86]

Are you using in the main host file project.json build key ?:

...
"build": {
      "executor": "@nx/angular:webpack-browser",
}

If yes you must provide alias in webpack.config.ts alias for stylesheet

[julianpoy]

Frustrating that there's still no solution for this all these years later.

[naithagoni]

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
            ]
          }
        },
        "serve": {
          "executor": "@angular-devkit/build-angular:dev-server",
        },
        "lint": {
          "executor": "@nx/eslint:lint",
          "options": {
            "lintFilePatterns": [...]
          }
        },
        "test": {
          "executor": "@angular-builders/jest:run",
          "options": {
            "tsConfig": "tsconfig.spec.json",
            "configPath": "jest.config.js"
          }
        }
      }
    }

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

[fhenzel]

Can you pls provide us your project.json files of the libraries. I'm not able to compile the "other shared libraries" because they don't know where to take the files for @use 'base/variables' as * : Can't find stylesheet to import. Unfortuately there is no known "styles" tag for @nx/angular:ng-packagr-lite. This is the executor I use to build the libraries.

Thx for your support

[naithagoni]

It seems like the issue might be related to the @nx/angular:ng-packagr-lite executor. Instead, I recommend using @angular-devkit/build-angular:application for build and @angular-devkit/build-angular:dev-server for serve as the executor. Refer the updated project.json for app1.

For reference, here is the current project.json of the shared library(libs/shared/styles/project.json):

{
  "name": "styles",
  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "libs/shared/styles/src",
  "projectType": "library",
  "targets": {
    "test": {
      "executor": "@nx/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
      "options": {
        "jestConfig": "libs/shared/styles/jest.config.ts"
      }
    },
    "lint": {
      "executor": "@nx/eslint:lint"
    }
  }
}

I haven’t made any changes to the default project.json.

[fhenzel]

Hey, Thx for your answer.
I don' t understand why I should use an application builder for the library instead of the @nx/angular:ng-packagr-lite.
The problem is not during app build but during build of the library that uses the shared theme lib:

nx build lib-that-uses-the-theme-lib

Kind Regards
Frank

[joewIST]

We have been able to configure our libraries to use absolute imports using stylePreprocessorOptions to the point where the app serves using nx serve (although we have had to turn off the warnings in the IDE), but the app fails to build using nx build. Sass is throwing "Can't find stylesheet to import" errors.

Has anyone else got to this stage and has any experience of getting the build to work?

We are using esbuild, Angular v18, Nx v20.

Thanks!