1

Grunt の代替ビルド ツールとして gulp を試して、scss を css にコンパイルします。

scss ファイルの基本的なコンパイルでさえ問題があります。gulp にgulp-sass、gulp-ruby-sass、およびgulp-compassプラグインを使用してみましたが、毎回ほぼ同じエラー メッセージが表示されます。

error screen.scss (Line 2 of _grid.scss: Undefined mixin 'box-sizing'.)

なので、コンパスのミックスインに当たるとすぐに落ちていくように見えます。コンパス バージョン 1.0.0.alpha.19 と sass バージョン 3.3.7 を使用して PC に Ruby をインストールしました。

これが私のgulpfileです：

var gulp = require('gulp'),
compass = require('gulp-compass'),
sass = require('gulp-ruby-sass');

gulp.task('compass', function() {
gulp.src('../sass/UK/screen.scss')
.pipe(compass({
    css: '../css',
    sass: '../sass',
  sourcemap: true,
  style: 'compressed'
}))
.pipe(gulp.dest('../css/UK/screen.css'));
});

gulp.task('sass', function () {
  gulp.src('../sass/UK/**/*.scss')
      .pipe(sass({ style: 'compressed', sourcemap: true }))
      .pipe(gulp.dest('../css/UK'));
});

コンパスのコピーがインストールされている場所を伝える方法はありますか? グローバルにインストールされていると思いました。

4

3 に答える 3

5

Gulp で Compass を使用する場合、少し混乱があります。gulp 拡張機能には、 gulp-ruby-sass、gulp-compass、およびgulp-sassの 3 つがあります。彼らは基本的に同じことをします。SASS を CSS にコンパイルします。しかし：

  • gulp-ruby-sass :言語に付属するコマンド ライン ツールsassのラッパーです。これは Ruby で書かれており、gem (Ruby のパッケージ マネージャー) を介してインストールされます。

  • gulp-compass : Compass フレームワークに付属するコマンド ライン ツールのラッパーです。これは Ruby で書かれており、gem 経由でもインストールされます。ただし、Compass は単なるフレームワークです。SASSファイルのみで構成されています。Compass コマンドが行うことは、コンパスの依存関係が解決されるように、フレームワーク SASS ファイルへのパスをsassコマンドに設定することだけです。

  • gulp-sass : ツールのラッパーです: libsassへの Node.JS バインディングであるnode-sass : Sass コンパイラの C/C++ 実装。

gulp-sassを使用しているため、上記の回答はうまくいきませんでした。コンパスファイルはそのままでは表示されません。最初にcompass-mixins (Compass フレームワークの SASS ファイル) をインストールし、後で compass-importer でインポートしました。

import compass from 'compass-importer';
import sass from 'gulp-sass';

gulp.task('styles', function () {
  return gulp.src(config.styles.src)
    .pipe(sass({
      importer: compass
    })
    .pipe(gulp.dest(config.styles.dest))
})
于 2016-10-27T19:26:20.003 に答える
4

そうですcompass、少なくとも簡単にこれを機能させるには、システムにグローバルにインストールする必要があります。sass と compass をアンインストールして、クリーンなものを使用することをお勧めします

gem uninstall sass && gem uninstall compass

そして、それらを再インストールします：

gem install sass
gem install compass --pre

そして、そのようにgulpタスクを定義できるようになったら

gulp.task('compass', function () {

  return gulp.src('../sass/UK/screen.scss')
    .pipe(sass({ compass: true, sourcemap: true, style: 'compressed' }))
    .pipe(gulp.dest('../css/UK/screen.css'));

});
于 2014-07-19T11:31:03.550 に答える
1

gulp-ruby-sass には次のような新しい構文があることに注意してください。

gulp.task('compass', function () 
  sass(../sass/UK/screen.scss, { compass: true, sourcemap: true, style: 'compressed' })
  .pipe(gulp.dest('../css/UK/screen.css'));
});
于 2015-09-16T05:59:03.167 に答える