プロジェクトのメンバーから、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
を実行してもらって、コンパイルができるようになった。