小编Kre*_*nom的帖子

在 Angular 库中使用和导出 scss

我一直在将共享代码块移动到一个库中,我们可以将其引入到其他项目中,其中一部分包括一些核心样式。

最终,我让库本身运行起来(对所有这些的文档感到不满是一个完全不同的主题),并带有几个基本组件。仅供参考,主要是以此为指导进行设置。

然而,我刚刚引入了一些更复杂的文件,以及一些我们想要跨项目以及库组件本身使用的 scss 文件(例如品牌着色等)。

tsconfig.json按照上述指南进行了设置,以便我的所有组件都可以使用import { x } from '@my-lib/core/src/lib/y';.

我最终还找到了所有信息,以便将我的样式作为资产添加到输出中,以便我们的消费项目可以访问这些信息;ng-package.json:

...
"assets: [
    "./assets"
]
...
Run Code Online (Sandbox Code Playgroud)

(注:样式/字体分别在assets/styles和中找到assets/fonts)。

解决问题。

我应该如何参考这些?通常,在我们的基本 Angular 项目中,这是一件简单@import 'src/styles/x';的事情。

使用我非常喜欢的组件路径别名是行不通的,例如import '@my-lib/core/assets/styles/x';

使用相对路径确实......有点。例如import '../../../assets/styles/x';

注意:共享样式之一用于排版,它具有src: url(../fonts/xyz.eot);` 类型用法(相对路径)。

此时,它在编译过程中比@my-lib导入更进一步,但会抛出警告:

WARNING: postcss-url: C:\.....\projects\core\src\lib\my-module\components\my-component\my-component.component.scss:36:3: Can't read file 'C:\.....\projects\core\src\lib\my-module\components\fonts\xyz', ignoring

该路径表明它正在按字面意义运行排版文件,该..\fontsurl 是相对于导入点(组件)的,而不是其在资产中的基本文件位置。

我如何正确连接所有这些以及为什么没有人设法为这些东西编写基本指南?

我必须创建自己的“白痴指南”博客,只是为了简化对像我这样的人的说明......

sass npm tsconfig angular angular-library

6
推荐指数
1
解决办法
9682
查看次数

标签 统计

angular ×1

angular-library ×1

npm ×1

sass ×1

tsconfig ×1