2022/04/24 11:15

Sublime TextでDartSassをコンパイルしたい

Sassのコンパイル方法もたくさんあって、何が一番いいのかを悩まれてる方も多いのではないでしょうか。

私は長らくSublime+Compass（RubySass）を使ってたので、2022年10月に行われる「Sassの@importの廃止」に向けて何とかDartSassへの乗り換えをSublimeで出来ないかいろいろと調べてみました。

VScodeを使ってる人はLive Sass Compilerや、DartJS Sass Compiler and Sass Watcherっていう便利なプラグインが用意されてるのでいいんですが、SublimeではDartSassをコンパイルできるようなプラグインが探せなかったのです。

まずはSassの@importの廃止についての話

2022年10月頃からSassで「@import」が使えなくなります。

公式が非推奨としてます。

今後は「@import」の代わりに「@use」や「@forward」というものを使わなければいけません。

今回の記事ではこれについては細かく触れてないんですが、今後サイトの修正時に@importでパーシャルを読ませているHPは放置してると危険かもしれません。

SublimeでDartSassをコンパイル可能にするには2ステップ

①

オリジナルのコンパイルシステムを自作する

（ファイル1枚コピペで作るだけ）

②

プロジェクトのファイル保存時にその自作ファイルを読ませるように指定してあげる

ちなみに私はSublime3を使ってますが、恐らく2とかでもいけるんじゃないかと。

Chocolateyをインストール

もしSass自体をローカルにインストールしてない場合は下記のChocolateyを利用してまずはPCへとSassを入れましょう。

Chocolatey : https://chocolatey.org/

コマンド（PowerShell）でsassをインストールする

choco install sass

インストールされてるか確認

sass --version

オリジナルのコンパイルシステムを自作する

今までCompassを使ってた人は、Sublime Text上部のメニューのところから

Tools＞Build System＞Compass

となってるはずですが

ココをまず変えます。

・DartSass用のコンパイラーを自作する

Tools＞Build System＞New Build System

下記をコピペ


{
"cmd": [
"sass",
"--update",
"$file:${file_path}/../css/${file_base_name}.css",
"--stop-on-error"
],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
}
}

※インデントは綺麗に揃えてください

あとはCtrl+Sで保存して、ファイル名を以下にする↓

ファイル名（例）

Dart-SASS.sublime-build

※頭の「Dart-SASS」の部分は任意でOKだと思います

※中身の記述はたまたまうまくいったものを載せてるだけなので、不要なものや足りないものがある可能性もあります

自作ファイルを読ませるように指定

再度、上部のメニューのところから

Tools＞Build System＞Dart-SASS

に設定する

使い方

sublimeの設定をどうしてるかにもよりますが、私の場合はCtrl+Bでコンパイルが実行。

後述しますが、Ctrl+Bを押す時にどのファイルを開いてるかが重要です。

注意点

「$file:」箇所のpath部分は各々でどこにcssを吐き出すかによって変わるかと思いますのでいじってください。

私の場合は@useでまとめたstyle.scssファイルの1つ上の階層にある「css」フォルダ内に吐き出したかったのでこうしてます。

後はstyle.cssファイルを開いてる状態でCtrl+Bをしないとダメでした。

例えば下層フォルダにある「_custom.scss」とか、パーシャルファイル（分割されたファイル達）の画面を開いてる状態でコンパイルしようとしても実行してくれないようでした。

何かやり方はあるんだろうけど、まだそこまで発見できてません。

※追記

解決策とまではいかないですが、私の場合ビルドファイルをこうしておく事でパーシャルファイル上でコンパイルしてもstyle.scssのみをコンパイルさせる事ができました。

・Dart-SASS.sublime-buildファイル


{
"cmd": [
"sass", "--update",
"${file_path}/style.scss:${file_path}/../css/style.css",
"&", "sass", "--update",
"${file_path}/../style.scss:${file_path}/../../css/style.css",
"&", "sass", "--update",
"${file_path}/../../style.scss:${file_path}/../../../css/style.css",
"&", "sass", "--style", "compressed", "--update",
"${file_path}/style.scss:${file_path}/../css/style.min.css",
"&", "sass", "--style", "compressed", "--update",
"${file_path}/../style.scss:${file_path}/../../css/style.min.css",
"&", "sass", "--style", "compressed", "--update",
"${file_path}/../../style.scss:${file_path}/../../../css/style.min.css",
],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
}
}