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

我尝试从项目的根文件夹导入，并且有效！！！

autocomplete.component.scss

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

Answer 2

简单地导入节点模块scss文件，可以使用scss文件中的 import 导入。有关更多详细信息，请查看此link

Answer 3

在Assets文件夹中包含scss文件很奇怪。您打算将它们用作静态资源吗？

无论哪种方式，只需使用相对路径（带有两个../）或_variables.scss的绝对路径即可将其导入。

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

3 个答案: