使用它自己的变量自定义引导程序 4 变量？ [复制]

Question

我正在使用最新的 Bootstrap 4 beta 2。我正在尝试自定义它。用我自己的意思改变变量。

我有自己的 styles.scss 以及所有引导导入：

// My variables
@import 'helpers/variables';

// Bootstrap files
@import 'node_modules/bootstrap/scss/functions';
@import 'node_modules/bootstrap/scss/variables';
@import 'node_modules/bootstrap/scss/mixins';
@import 'node_modules/bootstrap/scss/root';
@import 'node_modules/bootstrap/scss/print';
@import 'node_modules/bootstrap/scss/reboot';
// ... all others

官方文档提供了一个example，如何自定义引导程序（主题）。但只有 HEX 颜色的简单示例。

但是如果我想覆盖引导程序_variables.scss 中的变量并同时使用该文件中的变量怎么办？例如，我想让我的$primary 变黑。他们已经在_variables.scss 中有这个变量，但我不知道如何使用它。我试过这样：

// source: helpers/variables
@import 'node_modules/bootstrap/scss/functions';
@import 'node_modules/bootstrap/scss/variables';

$primary: $indigo;

但在这种情况下使用蓝色。如果我从 helpers/variables 中删除这些导入并用 HEX 替换颜色 - 一切正常。

我认为没有办法这样做，因为SASS不允许这样做，而是决定向社区询问。

Answer 1

只需创建您自己的 variables.scss 文件并将其设置为首先加载到您的 style.scss 中，这样它将覆盖默认的 Bootstrap 变量。

然后只需从 Bootstrap _variables.scss 中复制粘贴一些您想要更改为 variables.scss 的变量并自定义它们。 请注意，您应该删除 variables.scss 中的默认标记。