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

Posted 2023-03-07

【中文标题】如何在具有不同库共享变量的 monorepo 中管理 SCSS 样式表？

【英文标题】：How to manage SCSS stylesheets across a monorepo with different libraries sharing variables?

【发布时间】：2018-10-29 21:27:37

【问题描述】：

我有一个通过 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 中不起作用。

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

如下图所示。

【问题讨论】：

我也有同样的问题。我可以将它们全部填充到某个***目录中，然后进行通常的冗长导入。设置“路径”似乎不起作用（您设置了路径，但样式表中的导入语句无法识别它）。我想我会尝试将它们导入到库中的 styles.scss 中并尝试导出它，但这里还没有运气（尽管我没有尝试过我不认为的一切）。绝对是一个令人讨厌的问题，sass 等的性质在直觉上似乎非常单一，但导入非常冗长。这里的既定做法是什么？

现在，我们将在我们的项目中使用 css 变量。我们还在探索未来的 css-in-js 解决方案。

【参考方案1】：

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

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

ng 新的 myproject （cd 进入我的项目根目录） ng 添加@nrwl/workspace

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

ng 添加@nrwl/angular

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

这就是工作区的内容。现在创建一个库：

ng g lib scss --directory=stylesheets

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

这有几件事：

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

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

“@nameofrepo-nameoflib”

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

所以是的，如果你有十个项目，每个项目在 angular.json 中都有一个项目条目，每个项目都有一个 build.options 块（通常以“脚本 []”结尾，至少在我的 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"

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

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

这很适合我的项目。

【讨论】：

我们如何使用其他库中的这些变量？

不太明白，你的意思是如何在另一个样式库中使用来自一个样式库的样式变量？

是的。我有一个包含我所有 scss 变量的库，我想从不同的库中导入它们，但它似乎不起作用

我打赌这是你的配置。你是如何创建这些库的，你在 angular.json 中看到它们的路径条目吗？肯定需要有关您的设置的更多信息。

我以为我必须为库使用stylePreprocessorOptions，但实际上只是将它放在应用程序本身上就可以了！非常感谢