在另一个Angular-CLI(7)(库)项目中覆盖自定义SCSS变量

Question

我有两个Angular CLI项目(7(一个拥有

生成的库"核心"的项目

$ng g library core

我使用一个名为" vars.sidebar.scss"的文件来声明某些变量，例如：

$sidebar-bg: #fff999 !default;

，然后我在" sidebar.components.scss"中使用此文件。

我有另一个想要消耗第一个项目并修改varsidebar.scss.

中声明的变量的项目。

我不明白该怎么做...

编辑1：

---

这是我的Angular.json部分，涉及核心库：https://pastebin.com/g2jb4wdy

问题，如果我放置选项：

"stylePreprocessorOptions": {
  "includePaths": ["libs/core/src/lib"]
}

cli：" ng build core"告诉我：

    Schema validation failed with the following errors:
    Data path "" should NOT have additional 
    properties(stylePreprocessorOptions).

Answer 1

让我们假设您的图书馆用您的东西公开_library.scss。
要从应用程序导入它，您需要将该路径配置为应用程序build.options的angular.json：

"stylePreprocessorOptions": {
  "includePaths": ["libs/core/src/lib"]
}

然后，您可以从应用程序样式中 @import 'library';，并调用包含库样式的混音，就像Angular材料对mat-light-theme函数一样：
https://github.com/angular/components/blob/master/src/material/core/core/theming/_theming.scss

在使用这些混合之前(甚至可能在导入库样式之前(，您可以自定义变量，并且它们将用于默认的变量。

我可能会承认我会导入物质主题，然后我用自己的主题覆盖了一些物质变量:)快乐的ng编码！