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

发布时间：2020-12-17 10:25:26 所属栏目：安全来源：网络整理

导读：在node_module组件中,我有一堆我要覆盖的sass变量.例如,组件中具有！default规则的变量： $header-bg：red！default; 我想在我的angular-cli项目中将我的全局样式表中的这个变量覆盖为蓝色. 只需添加$header-bg：blue;不起作用.我该怎么做才能覆盖那些sass变

在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中覆盖默认变量.他们是怎么做到的？

嗨从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"
],

现在,每次要从bootstrap覆盖默认变量时,只需添加到_variable.scss,变量default将更改.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!