文章/答案/技术大牛

发布

社区首页 >问答首页 >使用自己的变量自定义bootstrap 4变量？

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

Stack Overflow用户

提问于 2017-10-26 00:28:53

回答 1查看 2.4K关注 0票数 1

我正在使用最新的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，如何定制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中删除这些导入，并将颜色替换为十六进制，则一切正常。

我认为没有办法做到这一点，因为SASS不会允许这样做，但决定请教社区。

css

sass

bootstrap-4

回答 1

Stack Overflow用户

发布于 2017-10-26 20:09:17

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46937602

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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