web-dev-qa-db-ja.com

Bootstrap 4つのメディアクエリミックスインが動作しないBootstrap 4 CDN経由

私はbootstrap 4をCDN経由で接続し、すべて正常に動作しますが、mixinのみが機能しません。phpstormでこのエラーが発生しました。検査は、有効なターゲットに解決できないsass/scssミックスイン参照について警告します。」

そして、これはターミナルで：

プラグイン '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);
});
_
sassgulpmedia-queriesbootstrap-4mixins
7
Belial

bootstrap 4つのミックスインをインポートする前に、これらのリソースを次の正確な順序でインポートします。

@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;
  }
}
10
Luca Perico

ここでのエラーはGulpプロセスに起因していますが、HTMLのCDNからロードされたbootstrap cssとは何の関係もありません。実際、cssはブートストラップのコンパイル済みバージョンです。 @mixin media-breakpoint-downの結果をcssスタイルの形式で組み込みます。

エラー状態として、sass/styles.scssファイルの365行で@mixin media-breakpoint-downを使用しようとしていますが、明らかにscss mixinは定義されていません。カスタムscssでbootstrap mixinsを使用するには、少なくともfunctions.scss）を@importする必要がありますvariables.scssおよびmixins.scssファイルのbootstrapファイルの上部にあるscssライブラリ。

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

プロジェクトフォルダーにbootstrap scssファイルが用意されていない場合は、 http://getbootstrap.com/docs/にリストされている方法のいずれかでインストールできます。 4.0/getting-started/download /＃package-managers 。（例：npmを使用した$ npm install [email protected]）libが存在したら、上記のインポートを行う必要があります。

ここで、別の手順として、bootstrapシステム全体をscssファイルにインポートします（@import "[path_to_bootstrap]/bootstrap";による）。この場合、htmlからcssリンクを削除できますstyles.cssにはライブラリ全体が含まれます。

2
dferenc