在 Angular 库中使用和导出 scss

Question

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

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

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

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

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

...
"assets: [
    "./assets"
]
...

（注：样式/字体分别在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 是相对于导入点（组件）的，而不是其在资产中的基本文件位置。

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

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

Answer 1

好吧，Drenai 的链接没有帮助（已经看到那个答案），但是这个链接有帮助。

理论上。

我还没有构建该项目，因为出于某种原因，它不想接受 mat-checkbox 实际上是一个已知元素，但我最终会弄清楚该部分。

不过，scss 错误已经消失，所以我相信我的更改已经起作用了......

styles.scss为项目创建了根文件。内容：

@import './assets/styles/typography';
@import './assets/styles/colours';

将其添加到根中的资产中ng-package.json：

"assets": [
    "./assets",
    "styles.scss"
]

移动了字体，而不是

assets
    - styles
    - fonts

下雪了

assets
    - styles
        - fonts

尽量避免跳来跳去。

最后将各种字体 URL 更新为~/fonts/....

然后每个组件似乎很乐意对单个样式文件进行相对导入，例如@import '../../../../styles';

正如前面提到的，对于组件是否需要设置encapsulation: ViewEncapsulation.None持观望态度，我还没有真正构建愚蠢的东西。

[中期编辑]但是，在其他模块之一（否则不使用共享样式）中快速使用它进行测试表明它有效，并且没有使用视图封装。

麾。

PS我还在 root 中导出了 scss 文件package.json，我不知道是否有必要，但我会将它们保留下来，因为我懒得进一步测试任何东西。它很有效，对于我周末受虐待的可怜大脑来说已经足够了。

"exports": {
    "./colours": {
        "sass": "./assets/styles/_colours.scss"
    },
    "./typography": {
        "sass": "./assets/styles/_typography.scss"
    }
}