vite报错："@charset" must be the fi

问题描述

$ yarn build                              
yarn run v1.22.17
$ vite build
vite v2.9.1 building for production...                                                                                                                                                                                                                                               10:58:18
✓ 1742 modules transformed.                                                                                                                                                                                                                                                          10:58:22
rendering chunks (4)...
 WARN  warnings when minifying css:                                                                                                                                                                                                                                                  10:58:22
▲ [WARNING] "@charset" must be the first rule in the file

    <stdin>:20:4:
      20 │     @charset "UTF-8";
         ╵     ~~~~~~~~

  This rule cannot come before a "@charset" rule

    <stdin>:2:8:
      2 │         html,
        ╵         ^


▲ [WARNING] "@charset" must be the first rule in the file

    <stdin>:3388:1:
      3388 │ }@charset "UTF-8";:root{--el-color-white:#ffffff;--el-color-blac...
           ╵  ~~~~~~~~

  This rule cannot come before a "@charset" rule

    <stdin>:2:8:
      2 │         html,
        ╵         ^

问题原因

• postcss给含有中文的scss 加了个@charset:UTF-8;
• element-plus的index.css文件包含@charset:UTF-8。

在组合css时@charset的位置并不是在头部(或最前面)，同时本地scss如果有中文也会自动添加@charset:UTF-8。因此build时就会warning提示错误了。

解决方案

修改vite.config.js，添加charset：false禁止项目scss添加@charset:UTF-8。
同时配置postcss删除库里的@charset:UTF-8

export default defineConfig({
css: {
        preprocessorOptions: {
            scss: {
                charset: false
            }
        },
        postcss: {
            plugins: [
                {
                    postcssPlugin: 'internal:charset-removal',
                    AtRule: {
                        charset: (atRule) => {
                            if (atRule.name === 'charset') {
                                atRule.remove();
                            }
                        }
                    }
                }
            ],
        },
    },
})

相关链接

https://github.com/vitejs/vite/issues/5833
https://github.com/vitejs/vite/discussions/5079