Bootstrap 4 媒体查询 mixin 不能通过 CDN 与 Bootstrap 4 一起使用答案

【问题标题】：Bootstrap 4 media-queries mixins not working with Bootstrap 4 via CDNBootstrap 4 媒体查询 mixin 不能通过 CDN 与 Bootstrap 4 一起使用
【发布时间】：2018-05-09 08:50:24
【问题描述】：

我正在使用通过 CDN 连接的 bootstrap 4，一切正常，但只有 mixins 不起作用。我在 phpstorm 中有这个错误：“找不到 mixin 'media-breakpoint-down'。这个检查警告 sass/scss mixins 引用不能解析到任何有效的目标。”

这在终端：

插件“sass”中的错误信息： sass\styles.scss 错误：没有名为 media-breakpoint-down 的 mixin

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

@include 媒体断点向下（xs）{ ---------^

这就是我在 scss 文件中使用它的方式：@include media-breakpoint-down(xs) { }

这就是我连接 bootstrap 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>

这是我的 gulpfile.js：

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var browserSync = require('browser-sync').create();

gulp.task('sass', function () {
    gulp.src('./project/sass/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe (autoprefixer('last 3 versions', '> 5%'))
        .pipe (minifyCSS())
        .pipe(gulp.dest('./project/css'))
        .pipe(browserSync.stream());
})

gulp.task('sass:watch', function () {
    gulp.watch('./project/**/*scss', ['sass']);
})

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./project",
    });

    gulp.watch("./project/sass/*.scss", ['sass']);
    gulp.watch("./project/*.html").on('change', browserSync.reload);
});

【问题讨论】：

Gulp 与从 CDN 加载的 css 无关。 ./project/sass/styles.scss 文件的内容是什么？
html页面的样式
这并不奇怪。但具体内容是什么？我猜你在第 365 行有 @include media-breakpoint-down。如果是这样，你是否在某处包含引导 scss 文件？
不，我只是在 HTML 文件中连接了 bootstrap 4，如下所示 - v4-alpha.getbootstrap.com/getting-started/introduction/… 就是这样。 bootstrap 的所有功能都有效，但只有 mixins 无效。

标签： sass gulp media-queries bootstrap-4 mixins

【解决方案1】：

在导入 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;
  }
}

【讨论】：

我在一个 Angular 项目上试过这个，但它不起作用。我仍然收到错误`模块构建失败中的错误（来自./node_modules/sass-loader/dist/cjs.js）：SassError：未定义的变量。 @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { node_modules\bootstrap\scss\mixins_breakpoints.scss 58:49 media-breakpoint-up() `

【解决方案2】：

这里的错误来自 Gulp 进程，但它与您的 html 中从 CDN 加载的引导 css 无关。其实那个css里面有已经编译好的bootstrap版本，它以css样式的形式合并了@mixin media-breakpoint-down的结果。

如错误所述，您正尝试在 sass/styles.scss 文件的第 365 行使用 @mixin media-breakpoint-down，但显然未定义 scss mixin。要在您的自定义 scss 中使用 bootstrap mixins，您必须至少 @import functions.scss、variables.scss 和 mixins.scss em> 文件顶部的 bootstrap 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 文件，您可以通过http://getbootstrap.com/docs/4.0/getting-started/download/#package-managers 中列出的方法之一进行安装。（例如：$ npm install bootstrap@4.0.0-beta.2 与 npm。）一旦库在那里，你必须在上面进行导入。

现在，另一个步骤是将整个引导系统导入您的 scss 文件（@import "[path_to_bootstrap]/bootstrap";）。在这种情况下，您可以从 html 中删除 css 链接，因为您的 styles.css 将包含整个库。

【讨论】：

当我尝试从 bootstrap scss 库中导入 functions.scss、variables.scss 和 mixins.scss 文件时，我在终端中有这个：插件“sass”消息中的错误：project\sass_mixins。 scss 错误：找不到或无法读取要导入的文件：mixins/断点。父样式表：D:/GeekHub Frontend+cms/hw8/project/sass/_mixins.scss on line 6 of project/sass/_mixins.scss >> @import "mixins/breakpoints"; ^
这只是意味着 Gulp 尝试访问位于 /project/sass/mixins/_breakpoints.scss 的文件，但它要么不存在，要么不可读。您是否手动复制了文件？
这非常适合我的 ReactJS 项目。赞一个。