【SCSS】DartJS Sass Compiler and Sass Watcher拡張子の導入方法

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に変換する(コンパイルする)拡張子

1. DartJS Sass Compiler and Sass Watcher拡張子をインストール
   
   　vsコード左のパネルから拡張子の検索バーからDartJS Sass Compiler and Sass Watcherを選択しインストールする。

2. 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/と記述

3. フォルダ作成(構成)
   
   test/css/style.css
   
   /sass/style.scss
   
   /sass/_header.scss
   
   /index.html
   
   ※style.scssに記述したものが自動でstyle.cssに記述（コンパイル）されていたら成功

   _header.scss記述場所を分散したやり方はまたブログ書きます。
   
   今日はこれで終わりです。
   
   お疲れ様でした。
   
   何か間違いがありましたら、ご指摘宜しくお願い致します。