在不同的 angular-cli 项目中覆盖组件的默认 sass 变量答案

【问题标题】：Override a component's default sass variables in a different angular-cli project在不同的 angular-cli 项目中覆盖组件的默认 sass 变量
【发布时间】：2018-03-09 12:56:28
【问题描述】：

在 node_module 组件中，我有一堆想要覆盖的 sass 变量。例如，组件中具有 !default 规则的变量：

$header-bg: red !default;

我想在我的 angular-cli 项目的全局样式表中将这个变量覆盖为蓝色。

仅添加$header-bg: blue; 不起作用。我应该怎么做才能覆盖那些 sass 变量？

编辑：我尝试执行以下操作。

我将 $header-bg: red !default; 变量放入一个名为 overridables.scss 的单独文件中，并将其导入我的全局样式表文件中，然后这样做：

$header-bg: blue;

@import "~mypackage/styles/overridables.scss";

这也没有用。

在 Ionic 中覆盖默认变量可以通过简单地将覆盖添加到我们的 variables.scss 来完成。他们是怎么做到的？

【问题讨论】：

它是你自己的组件吗？
@David 是的，它是一个外部模块。但我创造了它。
也许关于覆盖材料设计 scss 的链接可能会有所帮助：blog.thoughtram.io/angular/2017/05/23/…

标签： angular sass angular-cli

【解决方案1】：

您好，从node_modules 编辑组件，只需将其导入并放入.angular-cli.json。

例如，假设您要修改 bootstrap 4 变量。

1.创建新文件src/assets/bootstrap/index.scss:

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/root";
...

这只是从 bootstrap 复制所有文件 scss。

2。在src/assets/bootstrap中创建_variable.scss

因为我们要更新默认变量，我们需要创建自定义_variable.scss。只需从node_modules/bootstrap/scss/_variables.scss复制即可

//
// Color system
//

// stylelint-disable
$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;

3.最后包括index.scss 到.angular-cli.json：

"styles": [
  "styles.css",
  "assets/bootstrap/index.scss"
],

现在，每次你想从引导程序覆盖默认变量时，只需添加到_variable.scss，变量默认值就会改变。

【讨论】：

在新版本的 Angular cli 中，我认为您需要将样式指定为 ["src/styles.css", "src/assets/bootstrap/index.scss"]
在我们的设置中，我们需要在所有引导导入之前放置变量文件（角度 7）

【解决方案2】：

您是否尝试过使用 angular.cli 中的样式对象添加文件，例如

"apps": [
    {
      "root": "src",
      ...other config here
      "styles": [
        "../styles/overridables.scss",
         ...more css files
        ]
     }

我相信angular.cli的样式部分中指定的文件是在节点模块包中的css之后应用的。

【讨论】：