Bootstrap 4 媒体查询 mixin 不能通过 CDN 与 Bootstrap 4 一起使用
Posted
技术标签:
【中文标题】Bootstrap 4 媒体查询 mixin 不能通过 CDN 与 Bootstrap 4 一起使用【英文标题】：Bootstrap 4 media-queries mixins not working with Bootstrap 4 via CDN 【发布时间】：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 无效。
【参考方案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 项目。赞一个。以上是关于Bootstrap 4 媒体查询 mixin 不能通过 CDN 与 Bootstrap 4 一起使用的主要内容，如果未能解决你的问题，请参考以下文章