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颜色的简单示例。

但是，如果我想覆盖bootstrap _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中的默认标记。

使用自己的变量自定义bootstrap 4变量？

1 个答案: