从辅助条目导入 scss

Question

I have an Angular library which has secondary entries. From one of those, I'd like to export a .scss file.

In my .tsconfig , I create a path:

...
path:{
 "@my-entry/*":["my-entry/*"]
}

And the entry filestructure:

├── my-entry
    ├── index.ts
    ├── ng-package.json
    ├── src
        ├── index.ts
        ├── public_api.ts
        ├── */*.ts
        ├── my-styles.scss

In another entry, I'd like to use this scss file:

@use '@my-entry/src/my-styles.scss'

This obviously won't work, since I have only made a path for.ts, but I'd like to find a way to do something similar to tsconfig -> path for scss when making secondary entries.

Can this be done?

Thanks in advance.

Answer 1

There is an option called stylePreprocessorOptions for the angular workspace (Documentation found here ).

Add your path to the build.options :

// angular.json or project.json
"build": {
  "options": {
    ...
    "stylePreprocessorOptions": {
        "includePaths": ["my-entry/src"]
    },
    ...
  },
},

where my-entry/src is the path from the project root to the folder. You can then import your file (and other files from that folder or subfolders)

// your .scss file
@import "my-styles";
@import "subfolder/theme";

Since this is an angular configuration your IDE might not know that import.