Sass 引导4媒体查询混入不通过CDN使用引导4_Sass_Gulp_Media Queries_Bootstrap 4_Mixins

Sass 引导4媒体查询混入不通过CDN使用引导4

sass gulp bootstrap-4

Sass 引导4媒体查询混入不通过CDN使用引导4,sass,gulp,media-queries,bootstrap-4,mixins,Sass,Gulp,Media Queries,Bootstrap 4,Mixins,我使用的是通过CDN连接的Bootstrap4，一切正常，但只是混音不工作。我在php storm中有一个错误：“找不到mixin‘媒体断点关闭’。此检查警告无法解析为任何有效目标的sass/scss mixin引用。” 在航站楼：插件“sass”中出现错误信息： sass\styles.scss 错误：没有名为mixin的媒体断点关闭 Backtrace: sass/styles.scss:365 on line 365 of sass/styles.scss @包

我使用的是通过CDN连接的Bootstrap4，一切正常，但只是混音不工作。我在php storm中有一个错误：“找不到mixin‘媒体断点关闭’。此检查警告无法解析为任何有效目标的sass/scss mixin引用。”

在航站楼：

插件“sass”中出现错误信息： sass\styles.scss 错误：没有名为mixin的媒体断点关闭

   Backtrace:
    sass/styles.scss:365
    on line 365 of sass/styles.scss

@包括媒体断点关闭（xs）{ ---------^

这是我在scss文件中使用它的方式：

@include media breakpoint down（xs）{}

这是我连接引导程序4的方式：

  <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
        <link rel="stylesheet" href="css/styles.css">
      </head>
      <body>

        <!-- jQuery first, then Tether, then Bootstrap JS. -->
        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
      </body>
    </html>

这里的错误来自于一个Gulp过程，但它与html中从CDN加载的引导css无关。事实上，那里的css是已经编译过的引导版本，它以css样式的形式合并了

@mixin media breakpoint down

的结果

如错误所述，您正试图使用sass/styles.scss文件第365行上的

@mixin媒体断点

，但显然没有定义scss mixin。要在自定义scss中使用引导混合，您必须从引导中导入至少functions.scss、variables.scss和mixin.scss文件将scss库固定在文件顶部

// At the top of "sass/styles.scss"
@import "[path_to_bootstrap]/functions";
@import "[path_to_bootstrap]/variables";
@import "[path_to_bootstrap]/mixins";

.test-class {
  @include media-breakpoint-down(md) {
    display: block;
    // …
  }
}

如果您的项目文件夹中没有准备好引导scss文件，您可以使用中列出的方法之一进行安装。（例如：

$npm installbootstrap@4.0.0-beta.2

和npm。）一旦lib存在，就必须进行上面的导入

现在，另一个步骤是将整个引导系统导入到您的scss文件中（通过

@import“[path\u to\u bootstrap]/bootstrap”

）。在这种情况下，您可以从html中删除css链接，因为您的styles.css将包含整个库。

在导入bootstrap 4 Mixin之前，请按以下确切顺序导入这些资源：

@import "~bootstrap-4.0.0/scss/_functions.scss";
@import "~bootstrap-4.0.0/scss/_variables.scss";
@import "~bootstrap-4.0.0/scss/mixins/_breakpoints.scss";

现在可以这样写：

@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Gulp与从CDN加载的css无关。./project/sass/styles.scss文件的内容是什么？它是html页面的样式这一点并不奇怪。但是确切的内容是什么？我猜您在第365行有

@include media breakpoint down

。如果是这样，您是否将引导scss文件包含在某处？不，我刚刚连接如图所示，HTML文件中有bootstrap 4。bootstrap的所有功能都可以使用，但只有mixin不能使用。当我试图从bootstrap scss库中导入functions.scss、variables.scss和mixin.scss文件时，我在终端中有以下信息：插件“sass”消息中的错误：project\sass\u mixins.scss错误：要导入的文件不是f声音或不可读：mixins/breakpoints。父样式表：D:/GeekHub Frontend+cms/hw8/project/sass/_mixins.scss，位于project/sass/_mixins.scss>>@import“mixins/breakpoints”^这仅仅意味着Gulp试图在

/project/sass/mixins/_断点处访问文件。scss

，但它要么不存在，要么无法读取。您是否手动复制了这些文件？这对我的ReactJS project.Kudos非常有效。我在一个角度项目上尝试了此操作，但不起作用。我仍然在模块构建f中遇到错误出现故障（来自./node\u modules/sass loader/dist/cjs.js）：SassError:Undefined变量。@mixin media breakpoint up（$name，$breakpoints:$grid breakpoints）{node\u modules\bootstrap\scss\mixins\u breakpoints.scss 58:49 media-breakpoint-up（）`

@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}