vue3按需引入 vite-plugin-style-import 2.0版本报错（解决办法）

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

豆逗逗

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

阅读量915

点赞数 2

分类专栏： element-plus vue3 文章标签： elementplus vue3

本文链接：https://blog.csdn.net/weixin_38345306/article/details/134503140

版权

vue3 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

element-plus

3 篇文章 0 订阅

订阅专栏

报错配置()：
报错信息
解决方法配置

报错配置()：

//vite.config.js 部分代码
// 按需自动引入 elementplus 相关样式文件
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)=>{
          return `element-plus/lib/theme-chalk/${name}.css`
        },
        resolveComponent:(name)=>{
          return `element-plus/lib/${name}`;
        }
      }]
    })
  ],
})

报错信息

在这里插入图片描述
这是因为2.0版本之后，取消了styleImport

解决方法配置

// 按需自动引入 elementplus 相关样式文件
import {
  createStyleImportPlugin,
  ElementPlusResolve
} from 'vite-plugin-style-import'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createStyleImportPlugin({
      resolves: [ElementPlusResolve()],
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          resolveStyle: (name) => {
            return `element-plus/theme-chalk/${name}.css`
          }
        }
      ]
    }),
  ],
})