【SCSS】DartJS Sass Compiler and Sass Watcher拡張子の導入方法
cloud9をずっと使用していて、久しぶりにVSコードでコード書いています。
SCSSも久々過ぎて@mixinの使い方も忘れてる(涙)
拡張子の導入で時間が掛かったので記録する事にしました。
環境
Windows10
Visual Studio Code
Git Bush
SCSSとは
CSSよりも効率的に書くことが出来るメタ言語。
DartJS Sass Compiler and Sass Watcherとは
Sassで書いた内容をCSSに変換する(コンパイルする)拡張子
-
DartJS Sass Compiler and Sass Watcher拡張子をインストール
vsコード左のパネルから拡張子の検索バーから
DartJS Sass Compiler and Sass Watcherを選択しインストールする。 -
DartJS Sass Compiler and Sass Watcher拡張子の設定
歯車から拡張機能の設定を選択
1). Dartsass:Disable Auto Prefixerのチェックを外す
2). Dartsass:Disable Source Mapにチェックを入れる
3). Dartsass:Output Format にてcssonlyを選択
4). Dartsass:Target Directory を**css/**と記述 -
フォルダ作成(構成)
test/css/style.css
/sass/style.scss
/sass/_header.scss
/index.html
※style.scssに記述したものが自動でstyle.cssに記述(コンパイル)されていたら成功
_header.scss記述場所を分散したやり方はまたブログ書きます。
お疲れ様でした。
記述に誤りがありましたら、ご指摘宜しくお願い致します。
Discussion