Bootstrap 4 media-queries mixins not working with Bootstrap 4 via CDN

Question

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);
});

Gulp has nothing to do with the css loaded from the CDN. What's the content of the _./project/sass/styles.scss_ file? — dferenc, Nov 25 '17 at 20:08
No surprise in that. But what's the exact content? I guess you have `@include media-breakpoint-down` on line 365. If so, do you include the bootstrap scss files somewhere? — dferenc, Nov 26 '17 at 23:55
no, I just connected bootstrap 4 in the HTML file as shown here - https://v4-alpha.getbootstrap.com/getting-started/introduction/#quick-start and that's it. All functionality of bootstrap works, but only mixins not. — Belial, Nov 27 '17 at 02:26

score 24 · Answer 1 · answered Mar 23 '18 at 10:24

24

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;
  }
}

answered Mar 23 '18 at 10:24

Luca Perico

1,335
15
29

I tried this on an Angular project and it doesn't work. I still get the error ` ERROR in Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined variable. @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { node_modules\bootstrap\scss\mixins\_breakpoints.scss 58:49 media-breakpoint-up() ` – 7ahid Apr 20 '20 at 12:08

score 8 · Answer 2 · answered Nov 27 '17 at 09:16

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 bootstrap@4.0.0-beta.2 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.

when I trying to import the functions.scss, variables.scss and mixins.scss files from the bootstrap scss library I have this in the terminal: Error in plugin 'sass' Message: project\sass\_mixins.scss Error: File to import not found or unreadable: mixins/breakpoints. Parent style sheet: D:/GeekHub Frontend+cms/hw8/project/sass/_mixins.scss on line 6 of project/sass/_mixins.scss >> @import "mixins/breakpoints"; ^ — Belial, Nov 27 '17 at 17:14
That simply means Gulp tries to access the file at `/project/sass/mixins/_breakpoints.scss`, but it either does not exists or it is unreadable. Did you copy the files manually? — dferenc, Nov 27 '17 at 23:29

Bootstrap 4 media-queries mixins not working with Bootstrap 4 via CDN

2 Answers2