このブログで使ってる WordPress のテ－マを弄ろうと思って Gulp をアップグレ－ドしようとしたらハマった
gulp.src(srcPath)
.pipe(plumber())
.pipe(sass.sync({ includePaths: includePaths }))
.pipe(autoprefixer())
.pipe(rename({ extname: '.min.css' }))
.pipe(cleanCss())
.pipe(gulp.dest(destPath))これを
gulp.src(srcPath)
.pipe(plumber())
.pipe(sass.sync({ loadPaths: includePaths }))
.pipe(autoprefixer())
.pipe(rename({ extname: '.min.css' }))
.pipe(cleanCss())
.pipe(gulp.dest(destPath))にする。
具体的には includePaths を loadPaths へ変更する。
この includePaths が機能してないのを調べるのにすごい苦労した。
includePaths が機能していないのは v6 以前からも動作してない不具合 ? というか使い方がわからない ? みたいでググっても loadPaths に切り替えなきゃいけないっていうのに中々行き当たらなかった…公式サイトも includePaths の例が見当たらないし…
後、map-get を使ってるソ－スに
@use 'sass:map';
$breakpoints: (
'sm': 'screen and (max-width: 1023px)',
'md': 'screen and (max-width: 1023px)',
'lg': '(min-width: 1024px)',
'xl': '(min-width: 1024px)',
) !default;
@mixin responsive($key: md, $breakpoints: $breakpoints) {
@media #{map.get($breakpoints, $key)} {
@content;
}
}@use ‘sass:map’; の追加と、map-get から map.get へ切り替える。
これに休日 1 日使うって馬鹿みたいだよな…