Hi FE !
Ai
git
前端面试题
前端小tip
  • vite
  • webpack
npm
  • vue2
  • vue3
react
GitHub
Ai
git
前端面试题
前端小tip
  • vite
  • webpack
npm
  • vue2
  • vue3
react
GitHub
  • vue3加ts+vite2引入elementplus后icon不显示问题

vue3加ts+vite2引入elementplus后icon不显示问题

直接 vite2创建vue3项目

yarn create @vitejs/app

选择vue-ts 直接引入elementplus 会发现icon 不显示

方法1

在index.html中

<link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">

方法2

do this:
  yarn add sass -D
  yarn add vite-plugin-style-import -D

vite:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import path from 'path'
import styleImport from 'vite-plugin-style-import'

export default defineConfig({
plugins: [
vue(),
styleImport({
libs: [{
libraryName: 'element-plus',
esModule: true,
ensureStyleFile: true,
resolveStyle: (name) => {
name = name.slice(3)
return element-plus/packages/theme-chalk/src/${name}.scss;
},
resolveComponent: (name) => {
return element-plus/lib/${name};
},
}]
}),
],

})

还不生效就在引入个

import 'element-plus/packages/theme-chalk/src/base.scss'
Edit this page
最近更新: 2025/6/27 02:24
Contributors: qdleader
qdleader
本站总访问量 129823次 | 本站访客数 12人