Bootstrap 4媒体查询Mixins无法通过CDN与Bootstrap 4一起使用 [英] Bootstrap 4 media-queries mixins not working with Bootstrap 4 via CDN
问题描述
我正在使用通过CDN连接的引导程序4，一切正常，但只有mixins无法正常工作.我在phpstorm中遇到以下错误:找不到mixin'media-breakpoint-down'.此检查警告有关无法解析为任何有效目标的sass/scss mixins引用."
I'm using bootstrap 4 connected via CDN, all works fine, but only mixins not working. I have this error in php storm: "Cannot find mixin 'media-breakpoint-down'. This inspection warns about sass/scss mixins references which can't be resolved to any valid target."
这在终端:
插件"sass"中的错误 信息: sass \ styles.scss 错误:没有名称为media-breakpoint-down的mixin
Error in plugin 'sass' Message: sass\styles.scss Error: no mixin named media-breakpoint-down
Backtrace:
sass/styles.scss:365
on line 365 of sass/styles.scss
@include media-breakpoint-down(xs){ --------- ^
@include media-breakpoint-down(xs) { ---------^
这是我在scss文件中使用它的方式:@include media-breakpoint-down(xs) { }
This is how i'm using it in scss file: @include media-breakpoint-down(xs) { }
这是我连接引导程序4的方式:
This is how I connecting 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:
This is my 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);
});
推荐答案
在导入bootstrap 4 mixins之前，请按照以下确切顺序导入这些资源:
Before importing the bootstrap 4 mixins, import these resources in this exact order:
@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";
现在可以编写如下内容:
Now it is possible to write something like this:
@include media-breakpoint-up(sm) {
.some-class {
display: block;
}
}
这篇关于Bootstrap 4媒体查询Mixins无法通过CDN与Bootstrap 4一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
