完全な作業セットアップ
パッケージ.json
"devDependencies": {
"gulp": "~3.8.10",
"gulp-sass": "~1.3.2", //this installs libsass for us
"gulp-sourcemaps": "~1.3.0",
"gulp-plumber": "~0.6.6",
"susy":"~2.2.2"
}
Gulp sass タスク
var gulp = require('gulp');
var sass = require('gulp-sass');
var handleErrors = require('../util/handleErrors');
var sourcemaps = require('gulp-sourcemaps');
var minifyCSS = require('gulp-minify-css');
//libsass
gulp.task('sass', function () {
return gulp.src('./frontend/sass/style.scss')
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: [
'./node_modules/susy/sass' //required for sass
]
}))
//.pipe(minifyCSS()) //move to prod settings
.pipe(sourcemaps.write('./app/www/css')))
.pipe(gulp.dest('./app/www/css'))
});
サス
@import "susy";
$susy: (
global-box-sizing: border-box,
use-custom: (rem: true),
columns: 12,
gutters: (1/4),
debug: (
image: hide,
color: rgba(#66f, .25),
output: background,
toggle: top right,
)
);
エラー
may only compare numbers
タスク実行時のエラーを回避するには、次のことを行う必要があります。
node-sass の package.json を更新する
libsass の依存関係を次のように更新する必要がありました。
gulp-sass 1.3.1
¬ node-sass 2.0.0-beta
¬ libsass 3.1.0-beta - This needed updating to libsass 3.1.0-beta.2
上記はnode-sass
、最新のものを使用するように依存関係を更新するとすぐに冗長になりますlibsass
最後のステップ
次に、 sass(1/4)
ではなく1/4
. これにより、数値として扱われるようになります。https://github.com/sass/libsass/issues/590から取得したバグ
sass
エラーなしで gulp を実行できるはずです。