如何在Nuxt.js项目中应用Element UI自定义主题

操作步骤 #

1. 文件存放
   将解压得到的theme文件夹（内含index.css和fonts子目录）整体放入项目的assets目录下。config.json为主题配置备份文件，无需放入项目运行目录，自行留存方便后续调整主题参数即可。
2. 修改nuxt.config.js配置

• 找到配置项中的css数组，删除原有引入Element UI默认主题的条目（如element-ui/lib/theme-chalk/index.css），新增自定义主题的引入路径：

export default {
  // 其余原有配置保持不变
  css: [
    '@/assets/theme/index.css'
  ],
  // 若你是通过@nuxtjs/element-ui模块引入Element UI，还需要在模块配置中禁用默认主题：
  modules: [
    ['@nuxtjs/element-ui', {
      defaultTheme: false
    }]
  ]
}

3. 验证生效
   重启Nuxt开发服务，查看Element UI组件的主色、圆角等样式是否和你自定义的参数一致，图标加载正常即配置完成。

注：只要theme文件夹内index.css和fonts目录的相对位置保持解压后的原有结构，CSS内的字体资源引用路径无需手动修改，Nuxt会自动处理assets目录下的资源路径解析。

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