npm run build でビルドする際にwarnings when minifying css: ▲ [WARNING] "@charset" must be the first rule in the fileのエラーが出てしまう時の解決法

ビルド（npm run build）とは？

npm run buildとは、作成したVueアプリケーションをコンパイルし、サーバーアップロード（本番環境）向けにファイルサイズを小さくしたものを生成するコマンドです。
npm run buildコマンドを実行すると、同じ階層に dist というフォルダが生成されるので、このフォルダをそのままサーバーにアップロードするだけでアプリケーションを実行することができます。
このように、本番環境用のフォルダを生成することを ビルド といいます。
今回はビルドツールにViteを使用しています。
・Vite日本語ガイド
・Viteとは何なのか

npm run build 実行時のエラー

npm run buildを実行したところ、下記のようなエラーが出ました。

warnings when minifying css:
▲ [WARNING] "@charset" must be the first rule in the file

    <stdin>:60:1:
      60 │ }@charset "UTF-8";
         ╵  ~~~~~~~~

  This rule cannot come before a "@charset" rule

意訳すると、下記のようになります。
①when minifying css
＝　cssをminify（縮小）するとき、
②"@charset" must be the first rule in the file
＝　charset（文字コード）の指定は初めに行わなくてはなりません。
③@charset "UTF-8"; This rule cannot come before a "@charset" rule
＝　@charset "UTF-8";の表記は、charsetルール指定前に記載してはいけません。

CSSをコンパイルしている際にエラーが発生していることが分かるので、実行しているメソッドを確認します。

package.json

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
  },

npm run buildにより、"vue-tsc --noEmit" と "vite build"の２点が実行されていることが分かります。
このうち、vite buildが怪しいため、node_modulesを見に行きます。
findコマンドを用いて、「minifyCSSメソッド」 の書かれている場所を見に行きます。

console

$ pwd
中略/node_modules
$ find ./* -type f | xargs grep "minifyCSS"
./vite/dist/node/chunks/dep-9c153816.js:                        ? `export default ${JSON.stringify(inlined ? await minifyCSS(css, config) : css)}`
./vite/dist/node/chunks/dep-9c153816.js:                    css = await minifyCSS(css, config);
./vite/dist/node/chunks/dep-9c153816.js:                    extractedCss = await minifyCSS(extractedCss, config);
./vite/dist/node/chunks/dep-9c153816.js:async function minifyCSS(css, config) {

./vite/dist/node/chunks/dep-9c153816.jsを見に行き、コードを加筆します。

dep-9c153816.js

async function minifyCSS(css, config) {
    css = css.replace(/@charset "UTF-8";/ig,'') // 加筆部分
    const { code, warnings } = await esbuild.transform(css, {
        loader: 'css',
        minify: true,
        target: config.build.cssTarget || undefined
    });
    if (warnings.length) {
        const msgs = await esbuild.formatMessages(warnings, { kind: 'warning' });
        config.logger.warn(colors$1.yellow(`warnings when minifying css:\n${msgs.join('\n')}`));
    }
    return code;
}

再び npm run buildを実行します。

console

$ npm run build
> vue-app@0.0.0 build
> vue-tsc --noEmit && vite build

vite v2.8.6 building for production...
✓ 33 modules transformed.
dist/index.html                  0.50 KiB
dist/assets/index.41eeb2fe.js    6.67 KiB / gzip: 3.05 KiB
dist/assets/index.80eef061.css   1.59 KiB / gzip: 0.57 KiB
dist/assets/vendor.b426b39f.js   75.08 KiB / gzip: 29.78 KiB

無事にビルドされました。