ViteのホットリロードでCSSが効かなくなる現象について
よし
記事化したのでクローズ。
よし導入も楽で起動が早くて、といいことばっかりの Vite。
そのなか、使用しているうちにホットリロードで CSS が効かなくなる現象が起きたので、メモを残す。
環境
- 端末：Windows 10 + WSL(Ubuntu 20.01.2)
- Node.js：14.17.3
- Vite：2.6.10
Vite は WSL 側で起動。
構成
- HTML
- プレーンの CSS
- Vanilla JS
という単純構成。
再現条件
CSS ファイルを保存してホットリロードを4、5回動作させると発生。
ホットリロード自体は HTML・JS ファイルを保存時にも動作するが、問題の現象は CSS ファイル保存時のホットリロードで発生。
なお、サーバを起動しなおすと一旦元には戻る。
ただ、そこからまた同じことをすると起こる。
よし起点 JS ファイルから CSS をインポートした場合
import '../css/style.css';
.css ファイルをインポートすると、HMR をサポートする <style> タグを介してそのコンテンツがページに挿入されます。モジュールのデフォルトのエクスポートとして、処理された CSS を文字列として取得することもできます。
本来は、公式にもあるとおり、<head>タグ配下に<style> タグが挿入され、そこに CSS ファイルの内容が展開される。
しかし、問題の現象が起きたときは、<style>タグ自体は挿入されているものの、中身が何もない状態になっていた。
動的に<style>を追加するものとしてwicg-inertを併用しているが、これを使わないようにしても現象は起きたので関係なさそう。
よしlink タグ経由で CSS を読み込んだ場合
<link href="css/style.css" rel="stylesheet" />
クエリパラメータがつくので、それに応じて変化。
問題の現象発生時。CSS ファイルの中身が空になってしまっている。
よしVSCode 拡張のファイル保存時の自動整形との競合
CSS に関するファイル保存時の自動整形を有効にしていたので、どれかが競合しているのではないか？という検証。
- StyleLint：現象発生せず
- Prettier：現象発生せず
- autoprefixer：問題発生
どうも autoprefixer との相性がよくないっぽい。
しかし、この拡張はベンダープレフィックスを自動付与するものなので非常に便利な拡張。
どうにか共存できないか。
↓
Autoprefixer を VSCode 拡張としてエディタ上で動作させるのではなく、Vite でバンドルする時に実行してもらい、自動付与することにした。
$ yarn add -D postcss autoprefixer
module.exports = {
plugins: [require('autoprefixer')],
};
StyleLint にproperty-no-vendor-prefixという、ベンダープレフィックスを禁止するルールがあるので、それで手動でベンダープレフィックスを書くのを防いでおくといい。