2023.10.26　【更新日 : 2023.11.15】

ViteでビルドしたCSS内の日本語がUnicodeエスケープシーケンス変換されないようにする

Category：: 開発環境
Tags：: css, sass, Vite, タスクランナー, 開発環境

font-familyなどCSS内にある日本語設定をViteでUnicodeエスケープシーケンス変換せずにファイル圧縮をする方法です。

Viteに内蔵された機能でCSSを圧縮すると日本語文字列をUnicodeエスケープシーケンスに変換（例：\65e5\672c\8a9e）しますが、変換されるとWindows環境などでfont-family設定が効かなくなる場合があります。

英語指定に変更可能なら問題ありませんが、Webフォントなど日本語で設定する必要がある場合は、Vite内蔵の機能を無効化し、Vite以外の機能（本記事ではPostCSSのプラグインpostcss-csso）で圧縮をします。

Viteのベース構築

本記事はPostCSSやベース環境のインストールは完了していることが前提です。
基本の構築は以下の記事を参照してください。

【詳細版】Viteでコーダーのコーディング環境（HTML（ejsライク：ハンドルバー化）・Sass・JS）を作る

※本記事はejsを利用していません。代わりにHTMLファイルをejsと同等の機能を追加する（ハンドルバー化する）プラグイン vite-plugin-handlebars を利用し…

【簡易版】Viteでコーダーのコーディング環境（HTML（ejsライク：ハンドルバー化）・Sass・JS）を作る

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': {},
    },
  }
}

github.com

GitHub – lahmatiy/postcss-csso: PostCSS plugin to minify CSS using CSSO

PostCSS plugin to minify CSS using CSSO. Contribute to lahmatiy/postcss-csso development b…

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ページをご参照ください。

esbuild.github.io

esbuild – API

参考リンク

【Vite・Astro】ビルド時の日本語フォントのUnicodeエスケープシーケンス変換を阻止する方法