【Sass, npm】Sassの-vや–watchが無効?関数宣言エラーが消えない?Sassトラブル徹底解説!

15 / 05 / 2018
Category: CSS, FRONTEND, Sass
Tags: | |

どうもー、ドイツでフリーランスののフロントエンドエンジニアをしています、Arisaです。

先日もっさりと重たくなった6年も一緒のMacBook Proを俊敏にすべく、SSDに取り替え、メモリ増設もしたのですが、バックアップにどうやらSassパッケージが抜け漏れていた様子。

 

まあパッケージなのですぐインストールすればなんてことないので、インストールをSassのサイトでさくっと済ませて仕事に取り掛かるかと思いきや、怪奇現象に陥ったので、抜け出すためのメモ書きを残しておきます。

 

ついでに、最近遭遇したvariablesにミスはないのに関数宣言エラーが消えないトラブルの解説もSassトラブルシューティング記事として含めておきます。

 

この記事はSassを使ったことがあることを前提に書いているので、詳しい内容はSassのサイトか、他のソースをご覧ください。

 

Contents

-vや–watchができないケース

 

SassをインストールしたつもりがDart Sassをインストールしていたオチ

 

まずSassを $ npm install -g sass コマンドでインストール。

で、これがまずく、 Dart Sass なるものをインストールしたことに気がつかず。

 

Sassのバージョンを見ようとして $ sass -v が効かないというかコマンドラインで --version だと怒られたので、ここでようやくおかしいと気がつきます。

 

試しに --watchをしてみたけど、 Could not find an option named "watch”. とわかってたけどまた怒られます。

 

Sasswatchしたかった該当フォルダで --version を念のためチェックすると 1.3.0 compiled with dart2js 2.0.0-dev.50.0 dart Sassをダウンロードしていたことにさらに確信が。

いらないパッケージはなるべく消し去りたいので $sudo gem uninstall sass でdart Sassをアンインストールします。

 

$ sudo gem install sass -v 3.4.0 で安定板を指定してインストール。

これでバージョンも -v で見れるし、watchもきちんとできるようになり、改善。

結構あっさり解決ですが、いつもできていたwatchが急に拒否されると焦りますが、早とちりの私のことなので適当にSassのページをググってインストールしたズボラさが見事にしっぺがえしを食らったと言うことです 笑

 

Sassオフィシャルドキュメント。この通りのnpmコマンドだとDart SassになるからwatchはサポートされていないとGithubのフォーラムで発見。

 

関数にミスはないのにvariables宣言エラーが消えない現象

 

variablesパーシャルファイルを先頭に読み込ませたら即解決

 

variablesだけを書いたパーシャルファイルの読み込みをルートファイルの下の方に書いていたのが事の発端。

 

関数はきちんと宣言されていて、ありがちなスペルミスもないし、variablesのパーシャルファイルもルートファイルに書いて読み込ませているのに、なぜか Error: Undefined variable: ばかりが表示される。

 

試しにエラーになっている関数を消したり、pxになっていたのをダメ元でremにしたりしても今度は別のvariablesがエラーとして表示されるループ。

「関数のパーシャルファイル読み込みを先頭に持ってきたら直ったよ!」と言う親切なフォーラムコメントをGithubで発見したので試したところ綺麗に解決しました。

 

Sassもなかなかにpickyなようですね、そこが解決した後の達成感を高めてくれるのですが 笑

 

最近Sassを触る機会が以前よりも増えたので、Sassにまつわるトラブルシューティングでした。

では、

ちゅーす

 

SHARE

Leave a Comment

お名前、メールアドレスも必須項目です。メールアドレスが公開されることはありません。

Check before you submit.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください