代码之家 › 专栏 › 技术社区 › Lowtrux

Webpack 4仅使用BS Grid时不导入引导混入

webpack-4 bootstrap-4 sass

Lowtrux · 技术社区 · 7 年前

我正在使用Webpack 4,我正在尝试使用bootstrap 4 sass网格,我的方法是将引导网格类与HTML分离,因此我尝试导入网格混合项和网格本身,以便在我的sass组件中使用引导混合项,但由于某些原因,当我从我的node__modules文件夹导入引导混合项时,我无法访问它们:

这是一个文件(app.scss),我在其中从节点_模块导入所有文件:

 //----------------------------------*\
// BOOTSTRAP VARIABLES OVERRIDE
// AVOID BOOTSTRAP GRID TO BE GENERATED
//----------------------------------*/
$enable-grid-classes: false;

//----------------------------------*\
// BOOTSTRAP CORE
//----------------------------------*/
@import "../../node_modules/bootstrap/scss/_functions.scss";
@import "../../node_modules/bootstrap/scss/_variables.scss";
@import "../../node_modules/bootstrap/scss/_mixins.scss";

//----------------------------------*\
// BOOTSTRAP GRID
//----------------------------------*/
@import "../../node_modules/bootstrap/scss/_grid.scss";

这是网格。scss文件,我试图使用引导混入中的混入。scss:

.grid-container {
  @include make-container();
  @include make-container-max-widths; 
}

我有一个脚本。正在导入这两个文件的js(请记住,styles.scs正在导入.grid container:

 //----------------------------------*\
// LIBRARIES COMPONENTS
//----------------------------------*/
import "../scss/app.scss";

//----------------------------------*\
// LAYOUT, THEME & COMPONENTS
//----------------------------------*/
import "../scss/style.scss";

这是我得到的错误:

ERROR in ./src/scss/style.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??ref--5-3!./node_modules/sass-loader/lib/loader.js??ref--5-4!./src/scss/style.scss)
    Module build failed (from ./node_modules/sass-loader/lib/loader.js):

      @include make-container();
              ^
          No mixin named make-container
          in C:\Users\jpi\Documents\Proyectos\IMI\imienxarxa\Documentos\frontend\src\scss\layout\_grid.scss (line 2, column 12)

就像Webpack一样,我在任何时候都不会导入这些引导混搭,而是将它们全部导入到另一个文件(app.scss)中。

更新:

如果我导入网格。应用程序中的SCS。scss(我导入所有引导程序混音的文件)它实际上可以工作,我真的很困惑为什么它不能以另一种方式工作,因为最后所有的东西都包含在一个css文件中。任何帮助都将不胜感激。