angular - 在 Angular 库模块中导入 SCSS 变量文件

Question

我正在做一个 Angular 库(使用 SCSS)的项目。

我的项目结构是这样的:

├───UI-lib
│   ├──assets
│   │   └───styles/
│   │         └───_theme.scss
│   │         └───_varialbes.scss
│   └──src
│       └───lib
│           └─modules
│              ├───autocomplete
│              │   └───components
│              │       └───auto-complete/
│              ├───checkbox
│              │   └───components
│              │       └───checkbox/

  ......................

 │       
 ├───App Test        
 ├───e2e/
 └───src
     ├───app         
          └───my-module

我的ng-package.json:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ui-lib",
  "assets": [
    "./assets/"
  ],
  "lib": {
    "entryFile": "src/public-api.ts",
    "styleIncludePaths": [
      "./assets/styles/_theme.scss"
    ]
  },
  "whitelistedNonPeerDependencies": ["."]
}

问题是我无法在我的模块组件中导入我的 _varialbe.scss 文件。

你能帮我如何导入 _variables.scss 文件到 UI-lib/src/lib/modules/autcomplete/components/autocomplete/autocomplete.component.scss ?

我尝试在线搜索但没有找到有效的解决方案。

Answer 1

我已经尝试从项目的根文件夹导入并且成功了!!!

自动完成.component.scss

@import "projects/ui-lib/assets/styles/_variables";
   
...