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

Question

我通过Nrwl设置了角度单调，并使用了使用SASS的Angular Material's theming。

我希望在项目级别导入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新的myproject （cd进入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

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

这是两件事：

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

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

“ @ nameofrepo-nameoflib”

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

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

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

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

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

ng g app myapp

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

（cd进入apps / myapp / src）

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

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

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

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

@import“变量”

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

@import“ utils / somefile”

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

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

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