【更新日 : 】
ViteでビルドしたCSS内の日本語がUnicodeエスケープシーケンス変換されないようにする
- Category:
- 開発環境
font-familyなどCSS内にある日本語設定をViteでUnicodeエスケープシーケンス変換せずにファイル圧縮をする方法です。
Viteに内蔵された機能でCSSを圧縮すると日本語文字列をUnicodeエスケープシーケンスに変換(例:\65e5\672c\8a9e
)しますが、変換されるとWindows環境などでfont-family設定が効かなくなる場合があります。
英語指定に変更可能なら問題ありませんが、Webフォントなど日本語で設定する必要がある場合は、Vite内蔵の機能を無効化し、Vite以外の機能(本記事ではPostCSSのプラグインpostcss-csso)で圧縮をします。
Viteのベース構築
本記事はPostCSSやベース環境のインストールは完了していることが前提です。
基本の構築は以下の記事を参照してください。
Viteの設定を変更する
vite.config.jsの設定変更
vite.config.jsのbuildプロパティに圧縮を無効化する minify: false,
を追加します。
vite.config.js
export default defineConfig({
〜省略〜
build: {
minify: false,
〜省略〜
},
〜省略〜
});
postcss-cssoの追加
postcss-cssoをインストールし、postcss.config.cjsへ呼び出しコードを追記します。
npm install -D postcss-csso
postcss.config.cjs
module.exports = {
plugins: {
'postcss-csso': {},
},
}
}
JavaScriptファイルの圧縮を再設定する
vite.config.jsのbuildプロパティで圧縮を無効化すると.jsファイルの圧縮も無効化されてしまうため,jsファイルの圧縮設定も別途追加していきます。
.jsの圧縮はViteに内蔵されているesbuildで実施するため、追加で何かインストールする必要はありません。
package.jsonのbuildコマンドを拡張する
Viteで一度ビルドした後に.jsファイルに対してesbuildを実行し圧縮します。
viteのbuildコマンドの後に && esbuild dist/assets/js/*.js --minify --outdir=dist/assets/js/ --allow-overwrite
を追加します。
既に拡張コマンドを記載している場合もそれぞれ順番に実行されますので末尾に追加してください。
package.json
{
〜省略〜
"scripts": {
"dev": "vite",
"build": "vite build && esbuild dist/assets/js/*.js --minify --outdir=dist/assets/js/ --allow-overwrite",
"preview": "vite preview"
},
〜省略〜
}
package.json(何かしらコマンドを追記済みの場合)
{
〜省略〜
"scripts": {
"dev": "vite",
"build": "vite build && html-beautify dist/**/*.html && esbuild dist/assets/js/*.js --minify --outdir=dist/assets/js/ --allow-overwrite",
"preview": "vite preview"
},
〜省略〜
}
【任意】JavaScriptファイル内のUnicodeエスケープシーケンス変換も無効化したい場合
esbuildで圧縮を実行すると.jsファイル内の日本語はUnicodeエスケープシーケンス変換されますが、これも防止したい場合はesbuildの実行コマンドにオプション( --charset=utf8
)を追加します。
&& esbuild dist/assets/js/*.js --minify --outdir=dist/assets/js/ --allow-overwrite --charset=utf8
JavaScriptの実装でもUnicodeエスケープシーケンス変換の不具合が発生した場合に任意で追加してください。
package.json
{
〜省略〜
"scripts": {
"dev": "vite",
"build": "vite build && esbuild dist/assets/js/*.js --minify --outdir=dist/assets/js/ --allow-overwrite --charset=utf8",
"preview": "vite preview"
},
〜省略〜
}
その他のオプションについては公式サイトのAPIページをご参照ください。
関連リンク
- 【詳細版】Viteでコーダーのコーディング環境(HTML(ejsライク:ハンドルバー化)・Sass・JS)を作る
- 【簡易版】Viteでコーダーのコーディング環境(HTML(ejsライク:ハンドルバー化)・Sass・JS)を作る
- ViteでTailwind CSSを利用する(+最適化した独自styleが混在可能か検証)
- ViteでUnoCSSを利用する