Zenn
🐥

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

2022/04/11に公開
Scss
tech

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記述場所を分散したやり方はまたブログ書きます。
お疲れ様でした。
記述に誤りがありましたら、ご指摘宜しくお願い致します。

Discussion