Live Sass Compilerは、そのまま使うとScssファイルと同じ場所にCSSを吐き出します。
ですが実際の案件では、css/ や assets/css/ など、決まったフォルダに出したいことがほとんどです。
出力先は settings.json の savePath で指定できます。設定自体は数行で終わります。
この記事では、その手順を画像つきでまとめます。
- Live Sass Compilerの出力先を変更する手順
.vscodeフォルダとsettings.jsonの作り方- 絶対パスと相対パス、それぞれの書き方
- 設定する前に起動してはいけない理由
なお、この記事はLive Sass Compiler というVS Codeの拡張機能の設定です。ほかのコンパイラでは動きません。
インストールや基本的な使い方は、別の記事にまとめています。
今回は、ScssをコンパイルするLive Sass Compilerという、vscodeのプラグインの設定方法について解説していきます。 記事を読んでいただければ、基本的な設定は理解していただけると思います。 設定だけでなく、[…]
手順は3つだけです。
先に全体の流れを書いておきます。
.vscodeという名前でフォルダを作る。- その中に
settings.jsonという名前でファイルを作る。 savePathで出力先のパスを書く。
これだけです。順番に見ていきます。
1. .vscode フォルダを作ります。
.vscode という名前でフォルダを作ります。
置く場所はプロジェクトのルート直下です。ここを間違えると設定が読み込まれません。
なお、このフォルダはVS Codeの設定画面から「ワークスペース」の設定を変更すると自動で作られます。手で作るのが不安なら、そちらから作ってください。
今回は、ScssをコンパイルするLive Sass Compilerという、vscodeのプラグインの設定方法について解説していきます。 記事を読んでいただければ、基本的な設定は理解していただけると思います。 設定だけでなく、[…]
.vscode フォルダとは何か。
そのプロジェクト専用の設定を置いておくフォルダです。
VS Codeの設定は「設定画面」からも変更できますが、そちらはすべてのプロジェクトに適用されます。
Scssの出力先は案件ごとに違うので、全体に適用されると困ります。
.vscode の中に書いた設定は、そのフォルダがあるプロジェクトだけに効きます。だから案件ごとに出力先を変えられます。
2. settings.json を作ります。
作った .vscode の中に、設定を書くファイルを作ります。
ファイル名は settings.json です。
名前が1文字でも違うと読み込まれないので、コピーして貼り付けたほうが確実です。
3. savePath に出力先を書きます。
最後に、settings.json の中身を書きます。
コピーして使えるコードを置いておきます。
{
"liveSassCompile.settings.formats": [
{
"savePath": "/static/css/"
}
]
}liveSassCompile.settings.formats の中に savePath を書き、その値に出力先のパスを指定します。
この例なら、static の中の css フォルダにCSSが出力されます。
これで設定は完了です。コンパイルを実行して、指定したフォルダにファイルができていれば成功です。
相対パスで指定したい場合。
さきほどの /static/css/ は、プロジェクトのルートを起点にしたパスです。
Scssファイルの場所を起点にしたい場合は、こう書きます。
{
"liveSassCompile.settings.formats": [
{
"savePath": "~/../static/css/"
}
]
}ポイントは、先頭に ~/ を付けることです。
これで、いま編集しているScssファイルの場所を起点にして出力先を決められます。
ふだんはルート起点で書いておけば困りません。ディレクトリの構成が複雑なときだけ、相対パスを使うことになります。
設定は、起動する前にやってください。
最後にひとつ、注意点があります。
この設定は、Live Sass Compilerを起動する前に済ませてください。
起動すると、設定していない状態のままコンパイルが走ります。
そうなると、意図しない場所にCSSが出力されます。
すでにCSSファイルがある場所だと、上書きされてしまいます。
とくに、他の人が作ったサイトの更新を引き継いだときは気をつけてください。元のCSSを消してしまうと戻せません。
作業を始める前に .vscode/settings.json があるかを確認する。これを習慣にしておくと安全です。
まとめ
- 出力先は
.vscode/settings.jsonのsavePathで指定する。 .vscodeはプロジェクトのルート直下に置く。- Scssファイル起点にしたいときは、先頭に
~/を付ける。 - 設定してから起動する。先に起動すると既存のCSSを上書きする。
Live Sass Compilerのインストールや、コンパイルされないときの対処はLive Sass Compilerの設定方法！出力されないときの対処法も解説にまとめています。