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

Question

在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";

这也不起作用.

只需在我们的variables.scss中添加覆盖,就可以在Ionic中覆盖默认变量.他们是怎么做到的？

Answer 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";
...

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

2.创建_variable.scss于src/assets/bootstrap

因为我们要更新默认变量，所以我们需要创建custom _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，变量default就会更改。