1

こんにちは、gulp セットアップで、ブレークポイント サスを susy と連携させようとしています。

npm install breakpoint-sass --save-dev を実行し、 @import "./node_modules/breakpoint-sass/stylesheets/breakpoint"; を使用して sass ファイルの先頭にリンクしました。(susy は @import "./node_modules/susy/sass/susy" から正常に動作しています;)

私のgulp sassタスクはこれです

gulp.task("styles", function() {
return gulp.src("scss/application.scss")
    .pipe( bulkSass())
    .pipe(maps.init())
    .pipe(sass())
    .pipe(sass({
        outputStyle: 'compressed',
        includePaths: ['node_modules/susy/sass', 'node_modules/breakpoint-sass/stylesheets/breakpoint'],
    }).on('error', sass.logError))
    .pipe(maps.write('./'))
    //.pipe(autoprefixer())
    .pipe(gulp.dest('./build/css/'))
    .pipe(reload({stream:true}))
});

そして私のscssパーシャル

@import "./node_modules/breakpoint-sass/stylesheets/breakpoint";
@import "./node_modules/susy/sass/susy";

  #main {
    @include span(12);
    background: $primary-color;
    text-align: center;
       h1 {
        color: green;
        height: 2em;
       }

        @include breakpoint(500px){
          h1{
            color: red;
       }

    }

 }

h1 タグはすべての画面幅で赤くなり、緑になることはありません。なぜこれが起こっているのかわかりません。ruby を使用したうなり声プロジェクトで以前にブレークポイントを使用したことがありますが、問題はありませんでした。

ありがとう

4

2 に答える 2

0

ありがとう - @zisoft による優れたソリューションを試してみて、それを機能させることができなかった人に提案するための小さな調整が 1 つだけあります。私'./node_modules/breakpoint-sass/stylesheets'は成功して使用しました./。一部の人にとっては当然のことかもしれませんが、メモを取りたいと思いました。

于 2020-02-17T14:27:04.590 に答える