我正在使用 bootstrap CDN,我需要通过为修改后的代码创建新的 css 来使用 sass 覆盖 bootstrap。
例如:我有两个bootstrap css,一个是bootstrapcdn,另一个是sass修改的(main.css)。 main.css 还包括 Bootstrap 默认类和由 sass 创建的新/覆盖类。我需要将覆盖/新类保存为单独的 css 文件。如何使用 sass 将覆盖类保存为新的 css?
喜欢下面
<link rel="stylesheet" href="/path/to/bootstrap-cdn.css">
<link rel="stylesheet" href="/path/to/modified.css">
我添加了名为 $tertiary
的新颜色变量,如 $primary
,这是添加或修改 Bootstrap 类,如
:root { --tertiary: #66F;}
.list-group-item-tertiary {}
.btn-outline-tertiary {}
我需要将更新后的代码保存到新的 CSS 中。
下面是我的文件和它的结构(如果需要的话)
|-- \bootstrap-scss
| | |-- \mixins
| | |-- \utilities
| | |-- variables.scss
| | |-- functions.scss
| | |-- ...more bootstrap scss files
|-- \custom-scss
| | |-- _custom.scss
| | |-- _variable.scss
| | |-- main.scss
_变量.scss
$tertiary: #66F;
$theme-colors: () !default;
$theme-colors: map-merge(
(
"tertiary": $tertiary),
$theme-colors
);
主.scss
@import "variables";
// Bootstrap and its default variables
@import "../bootstrap-scss/functions";
@import "../bootstrap-scss/variables";
@import "../bootstrap-scss/mixins";
// Optional
@import "../bootstrap-scss/ all scss files ";
@import "custom";
最佳答案
确保最后选择具有首选样式的文件。您还可以将“!Important”添加到首选类中,尤其是在您需要覆盖时。
关于html - 如何在不编辑 bootstrap css 的情况下使用 sass 修改 bootstrap 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51906650/