くりゅぴ!

サーバーやWEB問題解決のメモから生活お得情報まで。未分類のものは執筆中

vscodeでScssを利用する

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", //最新のブラウザ2バージョンまで
      "ie >= 11", //ie11以上
      "Android >= 4", //Andoroid4以上
      "ios_saf >= 8" //iosのsafari8以上
    ]
  }

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

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

開発ツール

タグ:

開発ツールの最新記事

2020年6月19日
Hyper-V環境でネットにつながらない
2020年4月28日
mercurial作業領域状態(dirstate)破損への対応
2020年2月24日
vscodeでScssを利用する

コメントを残す

メールアドレスが公開されることはありません。