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

问题描述

我正在使用最新的Bootstrap 4 beta2.我正在尝试对其进行自定义.用我自己的平均值更改变量.

I am using latest Bootstrap 4 beta 2. I am trying to customize it. Mean change variables with my own.

我有我自己的 styles.scss 和所有引导程序导入:

I have my own styles.scss with all bootstrap imports:

// 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

官方文档提供了一个示例，如何自定义引导程序(主题).但是只有十六进制颜色的简单示例.

Official documentation provides an example, how bootstrap can be customized (themed). But there is only simple example with HEX colors.

但是，如果我想覆盖引导程序 _variables.scss 中的变量并同时使用此文件中的变量，该怎么办?例如，我想将我的 $ primary 黑色.他们已经在 _variables.scss 中包含了此变量，但是我没有找到如何使用它的想法.我已经这样尝试过:

But what if I want to override variables in bootstrap _variables.scss and use variables from this file at the same time? For example I want to make my $primary black. They already have this variable inside _variables.scss, but I didn't found an idea how to use it. I've tried like this:

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

$primary: $indigo;

但是在这种情况下使用蓝色.如果我从 helpers/variables 中删除了这些导入，并用十六进制替换了颜色-一切正常.

But in this case blue color is used. If I remove these imports from helpers/variables and replace color with HEX - all works fine.

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

I think that there is no way to do this, because SASS will not allow this, but decided to ask community.

推荐答案

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

Just create your own variables.scss file and set it to be loaded first in your style.scss and so it will overwrite the default Bootstrap variables.

然后只需将要更改的Bootstrap _variables.scss中的一些变量复制粘贴到您的variable.scss中并对其进行自定义.请注意，您应该删除variables.scss中的默认标记.

Then just copy-paste some variables from Bootstrap _variables.scss you want to change into your variables.scss and customize them.Note that you should remove default marks in your variables.scss.

这篇关于使用自己的变量自定义bootstrap 4变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！