作者:mobiledu2502916347 | 来源:互联网 | 2022-12-25 01:10
在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中覆盖默认变量.他们是怎么做到的?
1> hendrathings..:
嗨,您可以从中编辑组件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就会更改。