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

Question

我通过 Nrwl 设置了一个Angular monorepo，并且正在使用Angular Material 的主题，它使用 SASS。

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

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

我可以像这样写我的导入：

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

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

或者我可以这样写：

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

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

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

它的设置类似于下图。

标签： angularsassmonorepo

Answer 1

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

我首先使用 angular CLI 创建一个项目，然后添加扩展，从而创建一个 NX 工作区，如下所示：

• ng new myproject (cd 进入 myproject 根目录)
• ng 添加@nrwl/工作区

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

• ng 添加@nrwl/角

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

这就是工作空间。现在创建一个库：

• ng g lib scss --directory=stylesheets

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

这有几件事：

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

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

“@nameofrepo-nameoflib”

为了在 angular.json 中使用库中的 scss 资产，您必须手动（不理想，但确实如此）将以下片段添加到您想使用它的每个项目的“build.options”部分在。

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

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

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

ng g app myapp

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

(cd 到 apps/myapp/src)

ng g 模块 myfeature ng g 组件 myfeature

这将创建模块和组件文件夹和资产等。

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

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

@import "变量"

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

@import "utils/somefile"

再次...您必须配置 preproccesor 选项，如 angular.json 中的每个项目条目中所示！

另一个问题：这些路径可能会或可能不会在您的 IDE 中解析。奇怪的是，似乎有些人会，有些人不会。不完全确定此处的模式，但请记住，您的 IDE 可能会在技术上没有错误的情况下显示错误。

这对我的项目很有效。