stylePreprocessorOptions for libraries, where should I put in in angular.json?

Question

I'm trying to use stylePreprocessorOptions in order to include a path to my variables folders for a library project like so :

"stylePreprocessorOptions": {
  "includePaths": [
    "styles/variables"
  ]
}

Then I use @import 'colors'; within the scss file. But it doesnt work while doing ng serve :

@import 'colors';
       ^
      Can't find stylesheet to import.

Here is the full library in angular.json :

        "ui-table": {
            "root": "libs/ui/table",
            "sourceRoot": "libs/ui/table/src",
            "projectType": "library",
            "prefix": "xxx",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-ng-packagr:build",
                    "options": {
                        "tsConfig": "libs/ui/table/tsconfig.lib.json",
                        "project": "libs/ui/table/ng-package.json",
                        "stylePreprocessorOptions": {
                            "includePaths": [
                                "styles/variables"
                            ]
                        }
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": ["libs/ui/table/tsconfig.lib.json"],
                        "exclude": ["**/node_modules/**"]
                    }
                }
            },
            "schematics": {
                "@nrwl/schematics:component": {
                    "styleext": "scss"
                }
            }
        },

How can I use stylePreprocessorOptions in a library in Angular?

Thanks!

score 26 · Accepted Answer · edited Jul 22 '20 at 10:33

26

Not in angular.json.

Include the path to your scss folder with styleIncludePaths in the librairies' ng-package.json

"lib": {
    "entryFile": "src/public-api.ts",
    ...
    "styleIncludePaths": [
        "relative/path/to/scss/folder"
    ]
    ...
}

finally import the files from the referenced scss folder without prefix path as follows

@import "filename";

edited Jul 22 '20 at 10:33

Simplicity's_Strength

793
7
18

answered Apr 08 '20 at 02:51

Zainu

794
1
12
23

@GreatHawkeye please accept this as the correct answer if it has solved your issue like mine. – mor222 Sep 22 '20 at 13:38

score 0 · Answer 2 · answered Aug 29 '21 at 05:11

The accepted answer did not work for me using Angular v9.

But this did:

{
  "ngPackage": {
    "lib": {
      "styleIncludePaths": ["./src/assets/styles"]
    }
  }
}

More details here: https://github.com/ng-packagr/ng-packagr/blob/master/docs/style-include-paths.md

PhiLho · Answer 3 · 2021-12-23T10:39:31.163

I have a library upgraded to Angular 12, compiled with ng-packagr, but also having a demo project inside (ie. a mini-application showing off the components).
We use dart-sass (default for Angular now).

I had deep imports like: @import '../../../../layout/src/lib/form-label.mixins';

I just replaced them with @import 'layout/src/lib/form-label.mixins'; and it worked, where layout is at the root of the project: the library is made of sub-bundles.

I tried that because Angular didn't like to have styleIncludePaths declared in angular.json, and we don't have ng-package.json in our projects.

Note: IIRC, it didn't work in previous versions of Angular.

stylePreprocessorOptions for libraries, where should I put in in angular.json?

3 Answers3

Linked