问题描述
我有一个通过 Nrwl 设置的成角度的monorepo，并且正在使用 Angular Material的主题，它使用SASS.
我希望SCSS源文件在项目级别导入，在那里我将覆盖默认的颜色变量进行主题设置.
我遇到的问题是我想将SCSS源文件导入到monorepo内的其他应用程序/库中，并导入到此monorepo之外的项目中.
我可以这样写导入:
@import "../other-lib/style.scss";
...将适用于monorepo内部的任何内容.
或者我可以这样写:
@import "~@my-organization/other-lib/style.scss";
...在我的monorepo AFAIK中不起作用.
如何使它在两种情况下都能正常工作?
它的设置类似于下图.
我想我可能在这里有一些东西，这是我与NRWL团队反复交流后采用的解决方案.
我首先通过使用有角度的CLI创建一个项目，然后添加扩展来创建NX工作区，如下所示:
- ng新的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文件中是行不通的.显然，您需要该库来获取要解析的路径.
如果您看一下，您会看到路径"条目是这样的:
"@ nameofrepo-nameoflib"
为了使用该库中的scss资产，在angular.json中，您必须手动(不理想，但确实存在)将以下片段添加到每个和每个的"build.options"部分中您想在其中使用的项目.
是的，如果您有十个项目，则每个项目在angular.json中都有一个项目条目，每个项目中都有一个build.options块(通常以"scripts []"结尾，至少在我的原始安装程序中) ，并且您必须将其添加到每个选项部分中(此信息已存在，但我想确认，这直接来自NRWL团队):
现在，假设您已经创建了一个应用程序，并将以上配置添加到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可能会显示错误.
这对我的项目来说效果很好.
I have an angular monorepo set up via Nrwl and am using Angular Material's theming, which uses SASS.
I want the SCSS source files to import at the project level where I'll override default color variables for theming.
The problem I'm running into is that I want to import SCSS source files into other apps/libraries within my monorepo, and to projects outside of this monorepo.
I can write my imports like:
@import "../other-lib/style.scss";
...which will work for anything inside of the monorepo.
Or I can write it like this:
@import "~@my-organization/other-lib/style.scss";
...which won't work inside of my monorepo, AFAIK.
How do I get it to work in both contexts?
It's setup something like the diagram below.
I think I might have something here, this is the solution I've adopted after some back 'n forth with the NRWL team.
I create an NX workspace by first creating a project with the angular CLI, and then adding the extensions, like so:
- ng new myproject(cd into myproject root)
- ng add @nrwl/workspace
In addition, as of today (July 10, 2019) I've reported a bug that, even though the workspace is already an angular type and the @nrwl install recognizes that and installs @nrwl/angular, it does not correctly configure the default schematics collection, which means that "ng" commands will not run without appending "@nrwl/angular:" before the command (e.g. "ng @nrwl/angular:g module mymod"). So you have to run the install (select scss and whatever e2e runner you want):
- ng add @nrwl/angular
It'll tell you @nrwl/angular is already installed, but will alter the config files to recognize the angular as the default schematic collection, and your ng commands will run as expected again.
That's that for the workspace. Now create a lib:
- ng g lib scss --directory=stylesheets
This will put a lib named scss in libs->stylesheets. In the "lib" directory of that library, dump all your scss files. We will assume you put a file "variables.scss" in that lib directory.
What this does is a couple of things:
- When you created the library, a "paths" entry is added to your repo config. This allows you to use assets in the library by using that path instead of a long relative import. Note that just adding this entry and trying to import scss files into other scss files without the library wrapper, does not work. Evidently, you need that library to get that path to resolve.
If you look, you'll see the "paths" entry is something like this:
"@nameofrepo-nameoflib"
In order to use the scss assets in the library, in angular.json, you have to manually (not ideal but there it is) add the below fragment to the "build.options" section of EACH AND EVERY PROJECT YOU WANT TO USE IT IN.
So yes, if you have ten projects, each will have a project entry in angular.json, each of those will have a build.options block (typically ending with "scripts []", at least in my vanilla install), and you have to add this to each of those options sections (this info is out there, but I wanted to confirm, this is straight from the NRWL team):
"stylePreprocessorOptions": {
"includePaths": ["libs/stylesheets/scss/src/lib"]
},
"extractCss": true
Now, say you've created an app, and added the above config to the entry in angular.json:
ng g app myapp
And that within this app you created a feature module and component:
(cd into apps/myapp/src)
ng g module myfeatureng g component myfeature
That will create the module and component folder and assets, etc.
NOTE: As of same date as above, there's an issue that creating a component directly this way will create a .css file, even though .scss is the selected type for the project. Make sure you rename that file and change the component's pointer to it.
Within myfeature.component.scss, you would import "variables.scss" from your lib this way:
@import "variables"
Note there is no "~" (that resolves to node_modules). And, if you have subdirectories in the "lib" directory (e.g. utils), just path to it as you'd expect:
@import "utils/somefile"
Again...you MUST configure the preproccesor options as indicated in EACH project entry in angular.json!
Another gotcha: these paths may or may not appear to resolve in your IDE. Strangely, it seems some do and some don't. Not exactly sure of the pattern here, but keep in mind that your IDE may show an error where there technically isn't one.
This is working nicely for my projects.
这篇关于如何在具有不同库共享变量的单一仓库中管理SCSS样式表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！