Nuxt3中如何避免@import引入样式时的@charset错误？

问题描述 #

在Nuxt3项目的Vue文件中通过<style scoped>引入多个CSS文件：

<style scoped>
@import '../assets/front/css/bootstrap.min.css';
@import '../assets/front/css/all.min.css';
@import '../assets/front/css/slick.css';
@import '../assets/front/css/simple-line-icons.css';
@import '../assets/front/css/style.css';
</style>

执行npm run dev时出现警告：WARN [vite:css] @charset must precede all other statements

原因分析 #

部分引入的CSS文件（比如bootstrap.min.css）内部包含@charset声明，但通过@import在scoped样式中导入时，这些@charset会出现在样式块的中间位置，违反了CSS规范中@charset必须放在样式最开头的要求。

解决方案 #

方案1：将CSS导入移到全局样式文件 #

• 在Nuxt3项目的assets目录下创建全局样式文件（比如global.css），在其中导入所有需要的CSS：

@import './front/css/bootstrap.min.css';
@import './front/css/all.min.css';
@import './front/css/slick.css';
@import './front/css/simple-line-icons.css';
@import './front/css/style.css';

• 在nuxt.config.ts中配置全局样式：

export default defineNuxtConfig({
  css: ['~/assets/global.css']
})

所有样式会被全局注入，且@charset能处于正确位置。

方案2：手动移除CSS文件中的@charset声明 #

直接编辑对应的.min.css文件，删除其中的@charset "UTF-8";语句。注意：修改压缩后的文件可能在后续更新依赖时被覆盖，建议使用未压缩版本修改后重新压缩。

方案3：使用PostCSS插件自动处理 #

• 安装postcss-discard-charset插件：

npm install postcss-discard-charset --save-dev

• 在项目根目录创建postcss.config.js，配置插件：

export default {
  plugins: {
    'postcss-discard-charset': {}
  }
}

该插件会自动移除CSS中的@charset声明，避免冲突。

内容的提问来源于stack exchange，提问作者Henry Oladeji