title: Bootstrap 4 media-queries mixins not working with Bootstrap 4 via CDN
body: <p>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."</p>
  
  <p>And this in terminal:</p>
  
  <p>Error in plugin 'sass'
  Message:
      sass\styles.scss
  Error: no mixin named media-breakpoint-down</p>
  
  <pre><code>   Backtrace:
      sass/styles.scss:365
      on line 365 of sass/styles.scss
  </code></pre>
  
  <blockquote>
    <blockquote>
      <p>@include media-breakpoint-down(xs) {
         ---------^</p>
    </blockquote>
  </blockquote>
  
  <p>This is how i'm using it in scss file: <code>@include media-breakpoint-down(xs) { }</code></p>
  
  <p>This is how I connecting bootstrap 4:</p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
        &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
          &lt;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"&gt;
          &lt;link rel="stylesheet" href="css/styles.css"&gt;
        &lt;/head&gt;
        &lt;body&gt;
  
          &lt;!-- jQuery first, then Tether, then Bootstrap JS. --&gt;
          &lt;script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"&gt;&lt;/script&gt;
        &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>This is my gulpfile.js:</p>
  
  <pre><code>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', '&gt; 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);
  });
  </code></pre>