Bootstrap 4 media-queries mixins not working with Bootstrap 4 via CDN
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."
And this in terminal:
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) { ---------^
This is how i'm using it in scss file: @include media-breakpoint-down(xs) { }
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>
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);
});
Answer
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;
}
}