这是引导程序 4.0SASS
我的style.scss文件包含以下代码：
@import "../bootstrap/scss/bootstrap";
@import "colors";
@import "main";
并且_colors.scss文件包含以下代码：
$bg-white : white;
$theme-colors: (
primary: #333333
)
你可以看到我只是想覆盖，$theme-color('primary')但问题是它什么都不做。
如果我@import "colors"在文件的开头移动style.scss它会给我以下错误：
错误 ../bootstrap/scss/_forms.scss（第 284 行：$color: null 不是 `rgba' 的颜色）
实际上，该style.scss文件编译为style.css文件，并且该文件是链接文件。
问题：使用时如何覆盖$theme-colorin ？bootstrap-4SASS
任何帮助将不胜感激，并提前致谢
干杯。
Bootstrap 5 的 2021 年更新
根据文档中的指导...
“变量覆盖必须在我们的函数被导入之后，但 在其余的导入之前。”
因此，在 Bootstrap 5 中覆盖主题颜色的工作方式与 4.x 相同。为了覆盖主题颜色，只需在导入 bootstrap.scss 之前更改适当的主题颜色变量
/* custom.scss */
/* change theme colors */
$primary: #362ec4;
$secondary: #8f5325;
$success: #3e8d63;
$info: #7854e4;
$warning: #b8c924;
$danger: #d62518;
/* end custom.scss */
@import '~bootstrap/scss/bootstrap.scss';
Bootstrap 4.1 更新 2018
要更改 Bootstrap 4 SASS 中的主要或任何主题颜色，请在导入之前设置适当的变量bootstrap.scss。这允许您的自定义 scss 覆盖默认值，然后将在所有theme-colors循环（btn-primary、bg-primary、text-primary 等）中设置...
/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";
$theme-colors: (
primary: #333333;
);
/* finally, import Bootstrap */
@import '~bootstrap/scss/bootstrap.scss';
演示：https ://www.codeply.com/go/lobGxGgfZE
这也吸引了我。您需要在变量之前将 functions.scss 导入您的 scss 文件。
@import '../../node_modules/bootstrap/scss/functions';
@import 'assets/styles/variables';
@import '../../node_modules/bootstrap/scss/bootstrap';
您的路径可能不同。
这是 Bootstrap 4 Beta 1。
没有一个解决方案提供了工作。有些很接近，将更新大多数元素的颜色使用，但不是所有元素。我已经尝试了所有这些（以及我可以在 StackOverflow 和其他网站上找到的所有其他替代方案，但这些解决方案只会影响专门引用颜色属性的元素，并且不会更新那些使用主题颜色函数来获取颜色的元素。
The expected solution (and recommended by others) is
/* import only the necessary Bootstrap files */
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
/* -------begin customization-------- */
$colors: (
"" + blue: #004C9E
);
/* 80 required to bring primary and secondary colors to AAA standards */
$theme-colors: (
primary: #004C9E
);
// /* -------end customization-------- */
/* finally, import Bootstrap to set the changes! */
@import "../../node_modules/bootstrap/scss/bootstrap";
But this leaves 15 occurences of #007bff (the normal blue/primary color) throughout the generated custom.css. Examples of it occur in the pagination section, e.g.
.page-item.active .page-link {
z-index: 1;
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
By setting both the $colors and the $theme-colors custom properties after the import of the functions.scss, and placing the statement to import the variables.scss AFTER these changes appears to set the new colors throughout. I presume that by setting these variables specifically, the bootstrap variables cannot override them.
@import "../../node_modules/bootstrap/scss/functions";
/* -------begin customization-------- */
$colors: (
"" + blue: #004C9E
);
/* 80 required to bring primary color to AAA standards */
$theme-colors: (
primary: #004C9E
);
@import "../../node_modules/bootstrap/scss/variables";
/* put other customization in here */
// /* -------end customization-------- */
/* finally, import Bootstrap to set the changes! */
@import "../../node_modules/bootstrap/scss/bootstrap";
The may not seem right, but it does appear to work. I'm not a SASS expert, so maybe someone else could explain this better. I hope this helps anyone who may still be struggling to solve this issue.
我假设您已经安装了Bootstrap 4 betausingnpm并且您希望自定义 Bootstrap SCSS 而无需修改node_modules.
我这样做的方法是覆盖包含在以下内容中的 Bootstrap 变量variables.scss：
应用程序样式.scss
// Custom SCSS variables I wish to override (see below)
@import 'assets/styles/variables';
// Bootstrap 4 from node_modules
@import '~bootstrap/scss/bootstrap.scss';
变量.scss
$theme-colors: (
primary: $trump-hair,
secondary: $gandalf-hat,
success: $my-favorite-color,
info: #FBC02D,
warning: #FF5722,
danger: $color-of-melena,
light: #1B5E20,
dark: $bile-green
);
覆盖引导主题颜色的方式实际上是由于在即将到来的 beta 2 中更改。当前的要求是theme-colors覆盖时必须包含整个 Sass 映射。在当前测试版中，未能包含整个 Sass 映射将导致：
$color的参数darken($color, $amount)必须是一种颜色