问题描述
$ 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
