初心者webデザイナー・コーダーのための備忘録|Tech Stock 【テックストック】

Switch language

【脱Atom】VSCodeでscssのコンパイル先をcssフォルダ内にする方法

> HTML・CSS > Web初心者必見 > 開発環境整備

2022年12月15日にAtomエディタがサービス終了し、私を含め、コーディングエンジニアたちはAtomに替わるエディタソフトを探さなければいけなくなりました。

Atomの代替ソフトのおすすめとして、下記のエディタがあります。

  • Visual Studio Code
  • Brackets
  • Sublime Text

他にもエディタはいくつかありますが拡張性が乏しかったり有料だったりするので私は上記のソフトをおすすめしておきます。

その中でも私はMicrosoftが提供している「Visual Studio Code(VSCode)」を選択しました。

多くのエンジニアがAtomからVSCodeに乗り換えているかもしれません。

私がVSCodeで初めに躓いたのはscssファイルのコンパイル先をcssフォルダ内に設定するところでした。

私のエンジニア仲間も同様にその点が分からずAtomからVSCodeに完全に移行できずにいました。

やっとのことでそれを解決できてVSCodeに完全移行できましたので、本稿ではスクリーンショットや動画も交えてお伝えしていきます!

ぜひご活用ください!

拡張機能は「Live Sass Compiler」を使います

Atomでは「パッケージ」と言いますが、VSCodeでは「拡張機能」と言います。

scssのコンパイルには拡張機能「Live Sass Compiler」を使用します。

拡張機能のインストール方法はご存知かと思いますので割愛しますね。

Live Sass Compiler の設定ボタンを押して、「拡張機能の設定」を押してください。


次に、「Live Sass Compile > Settings: Formats」という項目を編集します。

他にもいろいろと設定項目がありますのでお好みで設定してください。

「Live Sass Compile > Settings: Formats」の「settings.json で編集」をクリックします。

小さくて見えないですね。

ここです。


クリックすると settings.json が開いて、設定コードが自動出力されます。
初期値はこのようになっています。

	"liveSassCompile.settings.formats": [
		{
			"format": "expanded",
			"extensionName": ".css",
			"savePath": null,
			"savePathReplacementPairs": null
		}
	],

これを下記のように書き換えてください。

	"liveSassCompile.settings.formats": [
		{
			"format": "expanded",
			"extensionName": ".css",
			"savePath": "~/../css",
			"savePathReplacementPairs": null
		},
	],


settings.json での設定は以上です。

本稿にたどり着いた方の多くはこれらの設定を他の記事で良くご覧になったかと思います。

しかし、この設定だけではscssファイルをコンパイルしてもcssフォルダ内に出力されなかったはずです。

私もそうでした。

あなたがこれまでご覧になった記事は、おそらく昔からVSCodeを使用していた方が書いた記事だったので、私が次にお伝えする「ワークスペースに登録する」という概念を伝え忘れていたのかと思います。

→→【重要】作業フォルダをワークスペースに登録する

次に、作業するフォルダをVSCodeのワークスペースに登録します。

この工程を行わなければscssをコンパイルしてもscssファイルと同じ階層にcssファイルが出力されてしまいます。

ワークスペースへの登録方法は動画の方が分かりやすいと思います。


文章でもご説明しますね。

ワークスペースへの登録はこのような流れです。

  1. エクスプローラーからVSCodeに、作業するファルダをドラッグします。
  2. 「このフォルダを信頼しますか?」のような画面が表示されます。
  3. 「信頼する」をクリックします。

これで作業フォルダがワークスペースに登録されました。



設定は以上です。

ただし、scssのコンパイル先がcssフォルダに設定されているのは、ワークスペースに登録した作業フォルダ内のみです。

ワークスペースの管理下ではないフォルダの中のscssファイルをコンパイルしてもcssフォルダに出力されませんのでご注意ください。

では、scssファイルをコンパイルしてお確かめください!

よろしければリアクションもしていただけると嬉しいです!

↓ ↓ ↓ ↓ ↓ ↓

関連記事

Mac で sass-autocompile を使う方法
まずはnode.jsをインストールしましょう。 https://nodejs.org/ja/ 上記ページの「推奨版」をダウンロード&インスト
WordPressで開発環境を構築する方法
今回はWeb制作の現場では、どのようにWordPressの開発環境を構築しているのかをお伝えしようと思います。 すでに公開しているWordP



コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です