在我的自定义变量文件中使用引导变量

Question

我正在制作一个自定义的Bootstrap主题。这是我在style.scss中的设置

// Custom variables
@import 'custom-variables';

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/images";

// Module imports
@import 'modules/contact-blok';

在我的custom-variables.scss文件中，我想使用：

$headings-color:              $gray-700;

但是在编译过程中我得到了一个错误：

错误:未定义的变量：“$gray 700”。

我必须做什么才能在我的自定义变量文件中使用Bootstrap变量？

Answer 1

您需要将包含变量的文件导入到custom-variables.scss。换句话说，您在根文件中导入了这个变量，并不意味着custom-variables.scss知道它。

另一种方法是使用CSS variables。