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

Question

我有一个角monorepo通过建立Nrwl和现在用角材料的主题化，它采用SASS。

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

我遇到的问题是，我想将SCSS源文件导入到monorepo内的其他应用/库中，并导入到此monorepo之外的项目中。

我可以这样写导入：

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

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

或者我可以这样写：

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

...无法在我的Monorepo AFAIK中使用。

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

它的设置类似于下图。

Answer 1

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

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

• ng new myproject（进入myproject根目录）
• ng添加@ nrwl / workspace

此外，截至今天（2019年7月10日），我已经报告了一个错误，即使工作区已经是角度类型并且@nrwl安装会识别出该错误并安装了@ nrwl / angular，但它无法正确配置默认值逻辑示意图集合，这意味着在命令前未附加“ @ nrwl / angular：”（例如“ ng @ nrwl / angular：g模块mymod”）将不会运行“ ng”命令。因此，您必须运行安装（选择scss以及所需的任何e2e运行程序）：

• ng添加@ nrwl / angular

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

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

• ng g lib scss --directory = stylesheets

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

这是做两件事的：

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

如果您看一下，您会看到“ paths”条目是这样的：

“ @ nameofrepo-nameoflib”

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

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

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

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

ng g app myapp

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

（光盘进入apps / myapp / src）

ng模块的功能ng g组件的功能

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

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

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

@import“变量”

请注意，没有“〜”（解析为node_modules）。并且，如果您在“ lib”目录中有子目录（例如utils），请按照预期的路径访问它：

@import“ utils / somefile”

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

另一个陷阱：这些路径在您的IDE中可能无法解析。奇怪的是，似乎有些做，有些没有。不能完全确定这里的模式，但是请记住，从技术上讲，您的IDE可能会显示错误。

这对于我的项目来说效果很好。