我正在使用通过 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 media-breakpoint-down(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); });
最佳答案
在导入 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;
}
}
关于sass - Bootstrap 4 媒体查询 mixins 无法通过 CDN 与 Bootstrap 4 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47488513/