angular - 如何跨具有共享变量的不同库的 monorepo 管理 SCSS 样式表？

Question

我通过 Nrwl 设置了一个 Angular monorepo并且正在使用 Angular Material's theming ，它使用 SASS。

我希望 SCSS 源文件在项目级别导入，我将覆盖主题的默认颜色变量。

我遇到的问题是我想将 SCSS 源文件导入到我的 monorepo 中的其他应用程序/库中，以及导入到这个 monorepo 之外的项目中。

我可以编写我的导入，如:

@import "../other-lib/style.scss";

...这将适用于 monorepo 内的任何内容。

或者我可以这样写:

@import "~@my-organization/other-lib/style.scss";

...这在我的 monorepo AFAIK 中不起作用。

我如何让它在两种情况下都能正常工作？

它的设置类似于下图。

Answer 1

我想我可能在这里有一些东西，这是我在与 NRWL 团队反复交流后采用的解决方案。

我通过首先使用 angular CLI 创建项目，然后添加扩展来创建 NX 工作区，如下所示:

新的我的项目
(cd 进入我的项目根目录)

ng 添加@nrwl/workspace

此外，截至今天(2019 年 7 月 10 日)，我报告了一个错误，即使工作区已经是 angular 类型并且 @nrwl 安装识别并安装 @nrwl/angular，它也没有正确配置默认值原理图集合，这意味着“ng”命令将不会运行，除非在命令前附加“@nrwl/angular:”(例如“ng @nrwl/angular:g module mymod”)。所以你必须运行安装(选择 scss 和任何你想要的 e2e runner):

ng 添加@nrwl/angular

它会告诉您 @nrwl/angular 已经安装，但会更改配置文件以将 angular 识别为默认示意图集合，并且您的 ng 命令将再次按预期运行。

这就是工作区。现在创建一个库:

ng g lib scss --directory=stylesheets

这将在 libs->stylesheets 中放置一个名为 scss 的库。在该库的“lib”目录中，转储所有 scss 文件。我们假设您在该 lib 目录中放置了一个文件“variables.scss”。

这样做有以下几点:

创建库时，“路径”条目会添加到您的存储库配置中。这允许您通过使用该路径而不是长的相对导入来使用库中的 Assets 。请注意，仅添加此条目并尝试将 scss 文件导入其他没有库包装器的 scss 文件是行不通的。显然，您需要该库来解决该路径。

如果你看，你会看到“路径”条目是这样的:

“@nameofrepo-nameoflib”

为了在 angular.json 中使用库中的 scss Assets ，您必须手动(不理想但确实存在)将以下片段添加到您想要使用的每个项目的“build.options”部分在。

所以是的，如果你有十个项目，每个项目都会在 angular.json 中有一个项目条目，每个项目都有一个 build.options block (通常以“scripts []”结尾，至少在我的 vanilla 安装中)，并且你必须将此添加到每个选项部分(此信息已在那里，但我想确认一下，这是直接来自 NRWL 团队):

"stylePreprocessorOptions": {
    "includePaths": ["libs/stylesheets/scss/src/lib"]
},
"extractCss": true

现在，假设您已经创建了一个应用程序，并将上述配置添加到 angular.json 的条目中:

ng g app myapp

在这个应用程序中，你创建了一个功能模块和组件:

(cd 进入 app/myapp/src)

ng g 模块 myfeature
ng g 组件 myfeature

这将创建模块和组件文件夹以及 Assets 等。

注意:截至与上述相同的日期，存在一个问题，即以这种方式直接创建组件将创建 .css 文件，即使 .scss 是项目的选定类型。确保重命名该文件并更改组件的指针。

在 myfeature.component.scss 中，您可以通过这种方式从您的库中导入“variables.scss”:

@import “变量”

请注意，没有“~”(解析为 node_modules)。而且，如果您在“lib”目录中有子目录(例如 utils)，只需按照您的预期路径即可:

@import "utils/somefile"

再次...您必须按照 angular.json 中的每个项目条目中的指示配置预处理器选项!

另一个问题: 这些路径可能会或可能不会在您的 IDE 中解析。 奇怪的是，似乎有些做，有些不做。不完全确定这里的模式，但请记住，您的 IDE 可能会显示技术上不存在的错误。

这对我的项目很有效。