私は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);
});
_
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;
}
}
ここでのエラーは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にはライブラリ全体が含まれます。