前回記事「フロントエンドの開発環境にVite ＋ TypeScriptを導入する」ではViteを使ったフロントエンドやコーディングの環境構築をまとめていましたが、引き続きViteの環境をカスタマイズしていきます。今回はSassの導入やPostCSS周りの設定とCSS周りで使えるライブラリを追加していきます。    

Sassのインストール

まずはSassのモジュールをインストールしていきます。こちらはwebpackやGulpを使った環境と同じですね。ただ、いろんなローダーや関連するモジュールをインストールしていましたが、Viteの場合にはこれだけでOKです。こういった手軽さも魅力ですね。

$ npm install --save-dev sass

  Sassを使う場合にはデバック用にマッピングファイルを使いたい時もありますが、その場合にはViteの設定ファイルにcssオプションで、ソースコード用のマッピングファイルを有効化しておきます。 【vite.config.js】

export default defineConfig({
  .....
  css: {
    devSourcemap: true,
  }
  .....
});

  あとはJS側でSassファイルをインポートして使っていきます。ビルド後はCSSファイルが生成されます。もちろんファイルの拡張子は「.scss」と「.sass」の両方に対応しています。 【main.ts】

import '../scss/style.scss';

   

PostCSSの設定と関連ライブラリの使用

続いてCSSに関連するいろんなライブラリを使ってみたいと思います。今回はベンダープレフィックスを自動で付与してくれる「Autoprefixer」と、CSSのプロパティを指定したルールでソートしてくれる「css-declaration-sorter」を使う例で進めていきます。まずはライブラリを下記のコマンドでインストールしていきます。また、これらのライブラリを使う際に、PostCSSの設定が必要となるので専用の設定ファイルをプロジェクトルートに下記のファイル名で作成しておきます。

$ npm install --save-dev postcss autoprefixer css-declaration-sorter
$ touch postcss.config.cjs

  Autoprefixerを使用するにあたって、ターゲットとなるブラウザについて「browserslist」に指定していきます。「package.json」の「browserslist」のキーでそれぞれ対象のブラウザを設定しておきます。 【package.json】

{
  ......
  "browserslist": [
    "last 2 version",
    "ie >= 11",
    "iOS >= 8.1",
    "Android >= 4.4"
  ]
}

  続いてPostCSSの設定を行います。こちらについてはViteの設定ファイルにも記述できますが、プラグインのオプションは配列形式で記述しないといけないため、今回は別途設定ファイルで指定しています。（ファイルを分けておくことで管理しやすくなるというメリットもあります）下記のように「plugins」のオプションで使用するプラグインを登録していきます。 【postcss.config.cjs】

module.exports = {
  plugins: {
    autoprefixer: {},
    'css-declaration-sorter': {
      order: 'smacss'
    },
  },
}

  「css-declaration-sorter」では「order」オプションで並び順の指定ができます。下記の3つがあり、それぞれプロジェクトに合わせて選択していきます。  

alphabetical	プロパティをa〜zのアルファベット順にソートする。
smacss	フローに対して影響度の高いものから順にソートする。（1.ボックス / 2.境界 / 3.背景 / 4.テキスト / 5.その他）
concentric-css	ボックスモデルで作用する箇所が外側のものから順にソートする。（1.位置 / 2.視認性 / 3.ボックスモデル / 4.サイズ / 5.テキスト）

  実際にビルド後のCSSを確認してみると、ベンダープレフィックスとプロパティのソートが適用されているのが確認できますね。プロパティの並びも適当に書いても綺麗に揃えてくれます。

// SCSS
img {
  left: 0;
  height: 200px;
  object-fit: cover;
  width: 300px;
  top: 0;
  display: block;
  position: absolute;
  opacity: 0.5;
  backdrop-filter: blur(2px);
}

↓

// CSS（ビルド後）※実際にはminifyされています
img {
  -o-object-fit: cover;
  -webkit-backdrop-filter: blur(2px);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 200px;
  object-fit: cover;
  backdrop-filter: blur(2px);
  opacity: .5
}

  そのほかにもCSS関連では様々なライブラリがありますので、必要に応じて導入してみるのも良いですね。手動ではかなり面倒な作業もこのようにビルドに合わせて自動化しておくことで、納品時のコードのクオリティアップも期待できますね。  

---

  今回はViteでSassを使うまでの準備やCSS関連のライブラリを扱う方法についてまとめてみました。コーディングにおいてはCSSを扱う時間もかなりの割合を占めますので、できるだけ効率よくコーディングが進められるよう、便利なツールやライブラリは積極的に活用していきたいですね。