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。

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

1 个答案: