Menu
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);
});
438
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;
}
}
The error here is coming from a Gulp process, but it has nothing to do with the bootstrap css loaded from CDN in your html. In fact, the css there is the already compiled version of bootstrap, which incorporates the results of the @mixin media-breakpoint-down in the form of css styles.
As the error states, you are trying to use the @mixin media-breakpoint-down on line 365 in your sass/styles.scss file, but apparently the scss mixin is not defined. To make use of the bootstrap mixins in your custom scss you have to @import at least the functions.scss, variables.scss and mixins.scss files from the bootstrap scss library at the top of your file.
// 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;
// …
}
}
In case you do not have the bootstrap scss files ready in your project folder, you can install that by one of the methods listed at http://getbootstrap.com/docs/4.0/getting-started/download/#package-managers. (E.g.: $ npm install [email protected] with npm.) Once the lib is there, you have to make the imports above.
Now, another step could be to import the whole bootstrap system into your scss file (by @import "[path_to_bootstrap]/bootstrap";). In this case you could remove the css link from your html, as your styles.css would contain the entire library.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
