vue3+vite+ts 引入element-plus踩坑

最新推荐文章于 2024-08-09 07:01:32 发布

我的代码没bug

最新推荐文章于 2024-08-09 07:01:32 发布

阅读量7k

点赞数 3

分类专栏： Vue TypeScript 前端文章标签： vue plugin vue.js typescript

本文链接：https://blog.csdn.net/xuhua32100/article/details/117771301

版权

在vue3项目中结合vite和typescript使用element-plus时，遇到样式加载不正确的问题。原来官方提供的base.scss并非正确引用，需要改为引入index.scss才能解决样式缺失的状况。通过安装element-plus，配置vite.config.ts，创建并注册plugins/element-plus/index.ts，以及在main.ts中引入和注册组件，最终成功应用element-plus。

摘要由CSDN通过智能技术生成

如标题,不知道是什么原因,element样式,官网给的是base.scss,实际上要引入index.scss.导致样式出不来

首先要安装element-plus,
```
npm install element-plus --save
```

2.vite.config.ts 引入插件

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';

// https://vitejs.dev/config/
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}`;
          },
        },
      ],
    }),
  ],
});

3.src新建plugin