web-dev-qa-db-fra.com

Les mélanges de requêtes de média Bootstrap 4 ne fonctionne pas avec Bootstrap 4 via CDN

J'utilise bootstrap 4 connecté via CDN, tout fonctionne bien, mais seuls les mixins ne fonctionnent pas. J'ai cette erreur dans la tempête php: "Impossible de trouver mixin 'média-breakpoint-down'. Cette inspection met en garde sur les références sass/scss mixins qui ne peuvent pas être résolues en une cible valide."

Et ceci en terminal:

Erreur dans le plugin 'sass' Message: Sass\styles.scss Erreur: pas de mixin nommé media-breakpoint-down

   Backtrace:
    sass/styles.scss:365
    on line 365 of sass/styles.scss

@include media-breakpoint-down (xs) { --------- ^

Voici comment je l'utilise dans un fichier scss: @include media-breakpoint-down(xs) { }

Voici comment je me connecte à 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>

Voici mon 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
3
Belial

Avant d'importer les mixins de bootstrap 4, importez ces ressources dans cet ordre exact:

@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";

Maintenant, il est possible d'écrire quelque chose comme ceci:

@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}
3
Luca Perico

L’erreur ici provient d’un processus Gulp, mais cela n’a rien à voir avec le css bootstrap chargé à partir de CDN dans votre code HTML. En fait, le css est la version déjà compilée de bootstrap, qui incorpore les résultats du @mixin media-breakpoint-down sous la forme de styles css. 

Lorsque l'erreur indique, vous essayez d'utiliser le @mixin media-breakpoint-down sur la ligne 365 dans votre fichier sass/styles.scss , mais apparemment, le mixage scss n'est pas défini. Pour utiliser les mixins d’amorçage dans votre scss personnalisé, vous devez @import au moins les functions.scss , variables.scss et mixins.scss fichiers de la bootstrap scss library en haut de votre fichier.

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

Si vous n'avez pas les fichiers bootstrap scss prêts dans votre dossier de projet, vous pouvez l'installer à l'aide de l'une des méthodes répertoriées à l'adresse http://getbootstrap.com/docs/4.0/getting-started/download/#package- gestionnaires . (P. Ex.: $ npm install [email protected] avec npm.) Une fois que la bibliothèque est là, vous devez effectuer les importations ci-dessus.

Maintenant, une autre étape pourrait être d’importer l’ensemble du système d’amorçage dans votre fichier scss (par @import "[path_to_bootstrap]/bootstrap";). Dans ce cas, vous pouvez supprimer le lien CSS de votre code HTML, car votre styles.css contiendrait la bibliothèque entière.

0
dferenc