vue3打包报错: “@charset“ must be the first rule in the file“

问题描述:

 问题原因:

postcss给含有中文的scss加了个 @chartset:UFT-8;

element-plus的index.css文件包含 @chartset:UFT-8;

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

解决方案: 

修改 vite.config.js 文件,添加 charset: false 禁止项目scss添加 @chartset:UFT-8;

同时配置postcss删除库里的@chartset:UFT-8;

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