vite打包报错：“@charset“ must be the first rule in the file_internal:charset-removal

问题原因

• 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();
                            }
                        }
                    }
                }
            ],
        },
    },
})