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

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"

}

}

パーシャルファイルのどこからでもstyle.scssだけを読みに行くようにしてるだけですね。

../の個数を増やしてどこからでもstyle.scssにたどり着くようにしてるだけ、みたいな。

 

それともしかするとですが、Sublimeのプラグインで「sublime on save build」ってのがあるんですが、それも入れた方がいいかも?です。

これはファイル保存時に自動でビルドする為のもの。

 

さらにやってて気づいたんですがRubySassが邪魔する可能性もあるみたいです。RubySassは消してみましょう。

 

あともう1点。

RubySassの時よりもコンパイルにかかる時間がちょっとだけ長いです。

体感としては2秒が6秒になったくらいの感じ。

 

以上、参考になれば幸いです。

 

では現場から以上です!

2842