gulp-sassのマイナーバージョンが上がったらsassファイルがコンパイルできなくなった

プロジェクトのメンバーから、gulpタスクで行なっているsassのコンパイルができなくなったとの相談を受けた。

起きていたエラーは以下。

Error: Mixins may not be defined within control directives or other mixins.

SassのControl Directives(@if、@each、@for、@while)や他のmixinの中ではmixinが定義できない、ということらしい。プロジェクトのコード内で、@ifの中で@mixinの定義をしている部分でエラーになっていた。

調べたところ、package.jsonで指定しているgulp-sassのバージョンが3.1.0から3.2.1に上がっていた。

gulp-sassのバージョンを3.2.0にするとエラーが起きなくなるので、3.2.0から3.2.1の間に問題があるらしい。

gulp-sass@3.2.1の変更点を見ると、依存するnode-sassのバージョンが4.8.3に変更されている。(gulp-sass@3.2.0は4.8.1)

これをやったら解決できた

package.jsonの中で指定されているgulp-sassのバージョンを、マイナーバージョンまで含めて固定した。

$ npm i gulp-sass@3.2.0 --save-exact

プロジェクトによってはこれでうまくいかない場合があったので、node-sassのバージョンも固定した。

$ npm i node-sass@4.8.1 --save-exact

それでもうまくいかない場合は、package-lock.json(ファイル)やnode_modules(フォルダー)を削除してもらって、再度 npm i を実行してもらって、コンパイルができるようになった。