在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文件。

你能帮我解决如何在UI-lib/src/lib/modules/autcomplete/components/autocomplete/autocomplete.component.scss中导入_variables.scss文件吗？

我尝试在网上搜索，但没有找到可行的解决方案。

- Phoenix404

---

我有完全相同的问题，IntelliJ编译器说导入的scss变量存在，但是angular构建找不到导入的变量。 - WorstCoderEver

Answer 1

我已经尝试从项目的根文件夹导入，它成功了！！！

自动完成组件.scss

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

- Phoenix404

Answer 2

在assets文件夹中放置scss文件是很奇怪的。你打算将它们作为静态资源提供吗？

无论如何，只需使用相对路径（带有一些../）或绝对路径来导入_variables.scss即可。

- Aram Khachatrian

Answer 3

在编程中，导入节点模块的scss文件很简单，只需在scss文件中使用import即可。如需了解更多详情，请查看link。

- deepak thomas

---

是的，但是从库的根目录正确导入scss文件到子模块的组件的方法是什么？ - Phoenix404