vscodeでScssを利用する

開発ツール

2020.02.24

この記事は約2分で読めます。

Live Sass Compilerを利用する
これを利用すれば、自動でScssファイルを指定した場所にCSSファイルとして出力してくれる。

CSS出力先を変更したい場合は、
.vscodeフォルダを作成し、その中にsetting.jsonファイルを作成。
そちらに以下のようにコードをかく

{
    "liveSassCompile.settings.formats": [ //Sassの出力内容の設定
      {
        "format": "expanded", //nested、compact、compressedのどれかを選ぶ
        "extensionName": ".css", //style.cssとして出力
        "savePath": "/css" //cssフォルダの中にstyle.cssを出力
      }
    ],
    "liveSassCompile.settings.excludeList": [ //対象外とするフォルダを指定
      "**/node_modules/**",
      ".vscode/**",
      ".history/**"
    ],
    "liveSassCompile.settings.autoprefix": [ //ベンダープレフィックスの指定
      "last 2 versions", //最新のブラウザ２バージョンまで
      "ie >= 11", //ie11以上
      "Android >= 4", //Andoroid４以上
      "ios_saf >= 8" //iosのsafari８以上
    ]
  }

VS CodeでScssを書くための環境構築方法
https://webdesign-trends.net/entry/929

「Live Sass Compiler」の設定方法 – VScodeでSassを書く
https://yumegori.com/vscode-sass-setting20200116