1

I have an angular library with styles that I want to use as if they were part of the application. I tried using includePaths in order to do this by using the following configuration in angular.json:

{
    projects: {
        "my-project": {
                "root": "",
                "sourceRoot": "src",
                "prefix": "mp",
                "architect": {
                    "build": {
                        "builder": "@angular-devkit/build-angular:browser",
                        "options": {
                            "outputPath": "dist/selenium-agent-ui",
                            "index": "src/index.html",
                            "main": "src/main.ts",
                            "polyfills": "src/polyfills.ts",
                            "tsConfig": "tsconfig.app.json",
                            "stylePreprocessorOptions": {
                                "includePaths": [
                                    "src/assets",
                                    "node_modules/ui-library/assets"
                                ]
                            },
...

In my scss style files I'd like to write the following:

@import "assets/ui-library-folder/ui-library-scss-file"

However, I'm getting the following error:

Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "assets/ui-library-folder/ui-library-scss-file";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\app\app.component.scss 1:9  root stylesheet

Folder structure:

my-app
|--node_modules
|  |--ui-library
|  |  |--assets
|  |  |  |--ui-library-folder
|  |  |  |  |--ui-library-scss-file.scss
|--src
|  |--app
|  |  |--app.component.scss
|  |--assets
|  |  |--...
|--angular.json
|--package.json
|--tsconfig.json
|--tsconfig.app.json

I've tried working according to the solutions provided in these links but they do not work:

https://www.digitalocean.com/community/tutorials/angular-shortcut-to-importing-styles-files-in-components

Angular 8 ignores includePaths

Shorten SCSS import path in Angular 7

https://github.com/angular/angular-cli/issues/5798

How to short path to file in Angular?

Noy Oliel
  • 1,430
  • 3
  • 13
  • 26

1 Answers1

1

Problem was the path included assets

replace:

"src/assets",
"node_modules/ui-library/assets"

with

"src",
"node_modules/ui-library"

or change the import paths. i.e.:

@import "ui-library-folder/ui-library-scss-file";

instead of:

@import "assets/ui-library-folder/ui-library-scss-file"
Noy Oliel
  • 1,430
  • 3
  • 13
  • 26
  • How to reference external `node_modules` css? I use Angular library which contains component using external css: `@import "3rd_party_node_module/its_styles/style.css`, but once I install my Angular library into my Angular app - this points to `https://localhost:4201/3rd_party_node_module/its_styles/style.css` instead of `node_modules/3rd_party_node_module/its_styles/style.css` – Alexander May 05 '22 at 23:03
  • @Alexander, Not sure but it seems related to your Webpack configuration. Do you use a custom configuration in addition to angular.json or a third-party builder? It looks like when the packaging process was done the URL was converted to point to a separate file. I would start by checking the build result rather than the code. Does the build result separate third-party vendors to separate packages? You'll need to understand better the parts related to your Webpack css loader/plugin in order to answer your question – Noy Oliel Jul 04 '22 at 11:04
  • 1
    I ended up with referencing this 3rd party node module in `package.json` and `ng-package.json` within `dependencies` and `allowedNonPeerDependencies` option correspondingly. After that everything was normal. – Alexander Jul 04 '22 at 13:35