代码之家 › 专栏 › 技术社区 › Kevin Beal

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

monorepo sass angular

Kevin Beal · 技术社区 · 6 年前

我通过 Nrwl 我在用 Angular Material's theming ,它使用SASS。

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

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

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

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

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

或者我可以这样写:

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

...这在我的monorepo里是行不通的。

我如何让它在两种情况下都起作用?

它的设置如下图所示。

1 回复 | 直到 6 年前

Tim Consolazio 5 年前

我想我这里可能有些东西,这是我在与NRWL团队进行了一些交锋后采用的解决方案。

我创建了一个NX工作区,首先使用angular CLI创建一个项目,然后添加扩展,如下所示:

我的新项目 (将cd放入myproject根目录中)
ng添加@nrwl/工作区

此外,截至今天(2019年7月10日),我报告了一个错误,即尽管工作区已经是一个角度类型,@nrwl安装识别并安装@nrwl/angular,但它没有正确配置默认的schematics集合,这意味着如果不在命令之前附加“@nrwl/angular:”的话,“ng”命令将无法运行(例如,“ng@nrwl/angular:g module mymod”)。因此,您必须运行安装(选择SCS和您想要的任何e2e runner):

ng添加@nrwl/角度

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

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

ng g lib scss--directory=样式表

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

这有两个作用:

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

如果你看一下,你会看到“路径”条目是这样的:

“@nameofrepo nameoflib”

以使用库中的scss资源。json,您必须手动(虽然不理想,但确实如此)将下面的片段添加到每个项目的“build.options”部分。

是的,如果你有十个项目,每个项目都有一个项目条目。json,每个都有一个构建。选项块(通常以“scripts[]”结尾,至少在我的普通安装中是这样),您必须将其添加到每个选项部分(此信息在那里,但我想确认,这是NRWL团队直接提供的):


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

   
   
   
    现在,假设您已经创建了一个应用程序,并将上述配置添加到angular中的条目中。json:
   
   
    ng g应用程序myapp
   
   
    在这个应用程序中,您创建了一个功能模块和组件:
   
   
    (cd进入apps/myapp/src)
   
   
    ng g模块myfeature
ng g组件特性
   
   
    这将创建模块、组件文件夹和资源等。
   
   
    
     注意:截至上述日期,有一个问题是,以这种方式直接创建组件将创建一个新的组件。即使是css文件。SCS是为项目选择的类型。确保重命名该文件并更改组件指向该文件的指针。
    
   
   
    在我的功能范围内。组成部分scss,您可以通过以下方式从库中导入“variables.scss”:
   
   
    @导入“变量”
   
   
    注意没有“~”(解析为节点_模块)。而且,如果“lib”目录中有子目录(例如utils),只需按照预期的路径即可:
   
   
    @导入“utils/somefile”
   
   
    
     再一次您必须按照angular中每个项目条目中的指示配置预处理选项。json!
    
   
   
    另一个问题:
    
     这些路径在IDE中可能会解析,也可能不会解析。
    
    奇怪的是,似乎有些人这样做,有些人不这样做。这里并不完全确定这种模式,但请记住,您的IDE可能会在技术上没有错误的地方显示错误。
   
   
    这对我的项目很有效。