2023-08-21

やりたかったことと概要

• Sassを用いたHTMLファイルをVSCode環境からブラウザでの表示状態を確認したい。
• そのためにVSCode拡張機能のLive Serverを用いる方法について調査した。
• Live Sass Compiler (Glenn Marks)というVSCode拡張機能を使えばよい。

前提

• 複数の.sassファイルが提供されている。
• app.scssが提供されていて、そこでは次の調子で各scssファイルがインポートされている。

@import "./style.scss";
@import "./darkmode.scss";
:

• 各htmlファイルは、./css/app.cssを用いてスタイリングをおこなっている。

<link rel="stylesheet" href="./css/app.css">

結果と注意点

• ダウンロードしたhtmlからスタイルが適用された状態をLive Serverから表示できた。
  • 指定したフォルダに、各sassファイルがコンパイルされたcssファイルが生成された。
• ただし、ダウンロードしたsassファイルがLive Sass Compilerでエラーが起きた場合は、これを解消しないとapp.cssが生成できない
  • おこなったsassファイルの修正が妥当である必要がある。

インストール

• VSCodeの以下の拡張機能をインストールする
  • Live Server
  • Live Sass Compiler (Glenn Marks)

設定

setting.json

  "liveSassCompile.settings.formats": [
    {
      "format": "expanded", <-- ここをcompressedに変更するか、変更した設定を配列に追加すれば、圧縮されたCSSが生成できる。
      "extensionName": ".css",
      "savePath": "/任意の場所/css",
    }
  ]

.gitignore

お好みで以下の設定をおこなう。

任意の場所/css/*.css
任意の場所/css/*.map

参考