Question

我正在使用材料设计Bootstrap mdbootstrap +将sass编译为css时反应js。

文件夹结构

src
   vendor 
     customBootstrap
      _component.scss
      _customvariable.scss
    customBootstrap4.scss

_compnent.scss

            @charset "UTF-8";

            // Bootstrap
            @import "../../../node_modules/mdbootstrap/scss/core/bootstrap/functions";
            @import "../../../node_modules/mdbootstrap/scss/core/bootstrap/variables";

            // CORE
            @import "../../../node_modules/mdbootstrap/scss/core/mixins";

            // Your custom variables
            //@import "../../../node_modules/mdbootstrap/scss/custom-variables";
            @import "../../../node_modules/mdbootstrap/scss/core/colors";
            @import "../../../node_modules/mdbootstrap/scss/core/variables";
            @import "../../../node_modules/mdbootstrap/scss/core/global";
            @import "../../../node_modules/mdbootstrap/scss/core/helpers";
            @import "../../../node_modules/mdbootstrap/scss/core/typography";
            @import "../../../node_modules/mdbootstrap/scss/core/masks";
            @import "../../../node_modules/mdbootstrap/scss/core/waves";

            // FREE
            @import "../../../node_modules/mdbootstrap/scss/free/animations-basic";
            @import "../../../node_modules/mdbootstrap/scss/free/modules/animations-extended/module";
            @import "../../../node_modules/mdbootstrap/scss/free/buttons";
            @import "../../../node_modules/mdbootstrap/scss/free/cards";
            @import "../../../node_modules/mdbootstrap/scss/free/dropdowns";
            @import "../../../node_modules/mdbootstrap/scss/free/input-group";
            @import "../../../node_modules/mdbootstrap/scss/free/navbars";
            @import "../../../node_modules/mdbootstrap/scss/free/pagination";
            @import "../../../node_modules/mdbootstrap/scss/free/badges";
            @import "../../../node_modules/mdbootstrap/scss/free/modals";
            @import "../../../node_modules/mdbootstrap/scss/free/carousels";
            @import "../../../node_modules/mdbootstrap/scss/free/forms";
            @import "../../../node_modules/mdbootstrap/scss/free/msc";
            @import "../../../node_modules/mdbootstrap/scss/free/footers";
            @import "../../../node_modules/mdbootstrap/scss/free/list-group";
            @import "../../../node_modules/mdbootstrap/scss/free/tables";
            @import "../../../node_modules/mdbootstrap/scss/free/switch";
            @import "../../../node_modules/mdbootstrap/scss/free/depreciated";
            @import "../../../node_modules/mdbootstrap/scss/free/steppers";
            @import "../../../node_modules/mdbootstrap/scss/free/loader";
            // Free addons
            // @import "../../../node_modules/mdbootstrap/scss/addons/datatables";

            // Your custom styles
            //@import "../../../node_modules/mdbootstrap/scss/custom-styles";

_customVariable.scss

            $primary: #8f605a;
            $secondary:#bb4444;
            $color:#ffffff;
            $link-color:#bbff00;
            $red:#bbff;

customBootstrap4.scss

                    @import "../../node_modules/mdbootstrap/scss/core/bootstrap/functions";
                @import "./customBootstrap/customVariables";
                @import "../../node_modules/mdbootstrap/scss/core/bootstrap/variables";
                @import "../../../node_modules/mdbootstrap/scss/core/variables";
                @import "./customBootstrap/components";

                @import "../../node_modules/mdbootstrap/scss/core/bootstrap/functions";
                @import "./customBootstrap/customVariables";
                @import "../../node_modules/mdbootstrap/scss/core/bootstrap/variables";
                @import "../../../node_modules/mdbootstrap/scss/core/variables";
                @import "./customBootstrap/components";

但是当我编译时会引发以下错误

     Error: Undefined variable.
     $btn-color-basic:             $white-base !default;
                                    ^^^^^^^^^^^
     ..\node_modules\mdbootstrap\scss\core\_variables.scss 76:31  @import
     src\vendor\custombootstrap4.scss 4:9                         root stylesheet

该变量在core / _variables.scss中定义，但是它说未定义，我不知道发生了什么。我确实尝试过将文件放在顶部，但是太徒劳了，它没有用。请让我知道发生了什么。导入文件排序错误吗？

未定义变量，但已定义MDBootstrap4

0 个答案: