ViteでPostCSS周りの設定やSassを使う
前回記事「フロントエンドの開発環境にVite + TypeScriptを導入する」ではViteを使ったフロントエンドやコーディングの環境構築をまとめていましたが、引き続きViteの環境をカスタマイズしていきます。今回はSassの導入やPostCSS周りの設定とCSS周りで使えるライブラリを追加していきます。
実際にビルド後のCSSを確認してみると、ベンダープレフィックスとプロパティのソートが適用されているのが確認できますね。プロパティの並びも適当に書いても綺麗に揃えてくれます。
今回はViteでSassを使うまでの準備やCSS関連のライブラリを扱う方法についてまとめてみました。コーディングにおいてはCSSを扱う時間もかなりの割合を占めますので、できるだけ効率よくコーディングが進められるよう、便利なツールやライブラリは積極的に活用していきたいですね。
Sassのインストール
まずはSassのモジュールをインストールしていきます。こちらはwebpackやGulpを使った環境と同じですね。ただ、いろんなローダーや関連するモジュールをインストールしていましたが、Viteの場合にはこれだけでOKです。こういった手軽さも魅力ですね。$ npm install --save-dev sassSassを使う場合にはデバック用にマッピングファイルを使いたい時もありますが、その場合には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.cjsAutoprefixerを使用するにあたって、ターゲットとなるブラウザについて「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.テキスト) |
// 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を扱う時間もかなりの割合を占めますので、できるだけ効率よくコーディングが進められるよう、便利なツールやライブラリは積極的に活用していきたいですね。
sponserd
keyword search
recent posts
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
- ViteでHandlebarsを使った複数ページの作成に使える外部JSONファイルのデータを読み込む
ViteでHandlebarsを使った複数ページの作成に使える外部JSONファイルのデータを読み込む
- ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング
ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング
- ViteでPostCSS周りの設定やSassを使う
ViteでPostCSS周りの設定やSassを使う
- フロントエンドの開発環境にVite + TypeScriptを導入する
フロントエンドの開発環境にVite + TypeScriptを導入する
categories