在 Angular 库中使用和导出 scss

Question

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

我最终让库本身运行起来（抱怨所有这些的文档是一个完全不同的主题），并带有几个基本组件。 仅供参考，主要使用 this 作为指南进行设置。

但是，我刚刚引入了一些更复杂的文件，以及一些我们想要跨项目以及库组件本身使用的 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

url 是相对于导入点（组件）而不是其在资产中的基本文件位置而言的。

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

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

Answer 1

这个

有帮助。 理论上。

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

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

为项目创建了根

..\fonts

文件。内容：

styles.scss

将此添加到根目录中的资产中

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

：

ng-package.json

移动了字体，而不是

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

就是现在

assets
    - styles
    - fonts

尝试避免跳来跳去。

最后将各种字体 URL 更新为

assets
    - styles
        - fonts

。

然后每个组件似乎很乐意对单一样式文件进行相对导入，例如

~/fonts/...

对于组件是否需要

@import '../../../../styles';

设置持观望态度，如前所述，我还没有真正构建愚蠢的东西。

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

庆幸。

附注我还在根目录中导出了 scss 文件

encapsulation: ViewEncapsulation.None

，我不知道是否有必要，但我将保留它们，因为我懒得进一步测试任何东西。它有效，对于我周末受虐待的可怜大脑来说已经足够了。

package.json

Answer 2

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

中的

assets

数组下添加样式，将其导出为lib中的样式。在这里我可以访问以下

ng-package.json

样式以及参考文件夹

core

styles