久しぶりにSCSSでコンパイルをしようかとPHPStormを開いたが、PCを変えたのを忘れていて、1から設定する必要性があった。
設定方法が分からずに苦戦していたが、3時間の格闘の末、ようやく動いた。
今回は、成功したSCSSのやり方を記載していく。
環境
Mac Big Sur バージョン11.4
Catalina移行はシェルをBashではなくてzshを利用していたので、
.bashrcや.bash_profileに記載しても適応されなかったようでした。
Homebrewのインストール
このあと、npmをインストールやパスを通してターミナル上では動くようになったものの、
PHP Storm 上では
env: node: No such file or directory
と表示され、動いていないようだった。
そこでとある記事を参考に、nodebrewを入れてみることにした。
nodebrew インストール
brew install nodebrew
nodebrew -v
nodebrewがインストールされていることが確認できたら、最新版をインストール。
mkdir -p ~/.nodebrew/src
nodebrew install-binary latest
ダウンロードされているnodebrewのバージョンを確認し、任意のバージョンを選択
nodebrew list
nodebrew use vX.X.X(listで記載されているバージョン)
その後パスを通すのだが、.bashrcではなくて.zshrcに記載する必要があったようだ。
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
exec $SHELL -l
node --version
.zshrcを確認すると、きちんとパスが指定されているのが分かる。
バージョンが指定されたバージョンと同様であることを確認。
node-sass の導入
npm install --global --save-dev node-sass
node-sass -v
バージョンが確認できたら成功。
PHP Storm での設定
本来の設定方法とは違う可能性が高いが、私はこの方法がわかりやすいと思う。
プログラム：
node-sassを指定。
プログラムが動かなければ
which node-sass
をターミナルに入れて出てきたパスを設定する。
因数:
$FileName$ $FileNameWithoutAllExtensions$.cssを指定。
意味としては
$FileName$:コンパイルする対象のファイル名
$FileNameWithoutAllExtensions$:コンパイルする対象のファイル名から拡張子を除いたものを示す。
上2つをあわせると、ターミナルで
node-sass $FileName$ $FileNameWithoutAllExtensions$.css
と一緒の意味になる。
つまり、コンパイルするファイル名がstyle.cssの場合、
node-sass style.scss style.css
をターミナル上でコンパイルしたのと一緒の意味になる。
他の設定項目は特に設定したりしていないが、
「コンソールの表示」を常時にすることで、きちんとコンパイルされているかが確認出来て便利だと思う。