如何解决无法在Sass中使用默认的Bootstrap颜色
我使用以下代码导入了bootstrap scss
@import "node_modules/bootstrap/scss/bootstrap";
我什至可以更改默认的引导程序变量,例如:
$border-radius: 1rem;
但是问题是我不能像这样在自己的CSS选择器中使用自举颜色,为什么下面的代码不起作用?它不会改变颜色。
aside a {
color: $success;
}
解决方法
问题在于,$success
不是设置为SASS / SCSS变量,而是CSS变量,例如--success
:
aside a {
color: var(--success);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<aside>
<a href="#">link</a>
</aside>
以下是文档: https://getbootstrap.com/docs/4.0/getting-started/theming/#available-variables
,这样使用
@import "style/variables";
@import "node_modules/bootstrap/scss/bootstrap";
@import "style/my_other_SCSS
在variables.scss中
$border-radius: 1rem;
在my_other_SCSS.scss
中aside a {
color: $success;
}
这将起作用。
,样式表中还有另一个!important 规则会覆盖链接颜色。
a {
color : white !important
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。