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

news2024/11/14 18:32:41

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

报错配置():

//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`
          }
        }
      ]
    }),
  ],
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1229068.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

uniapp开发小程序,包过大解决方案

1、首先和大家说一下 微信小程序 主包限制不能超过2M 分包一共不能超过8M 然后具体解决优化步骤如下, 将主包进行分包 在pages.json 下subPackages里面进行配置分包 分包配置完 配置过的文件都需要进行修改对应的路径 2 、 在运行的时候 一定要勾选 压缩代码 有…

Mac git查看分支以及切换分支

查看本地分支 git branch 查看远程仓库分支 git branch -r 查看本地与远程仓库分支 git branch -a 切换分支 git checkout origin/dev/js

纯JS,RSA,AES,公钥,私钥生成及加解密

通过网络找的JS源文件,修改后使用,包含RSA 密匙对生成 及AES 加解密 涉及的JS源文件 下载 GitHub - cgrlancer/RSA-AES: 纯js,RSA,AES前端加解密 前端引用 import {generateRsaKeyWithPKCS8,encryptByRSA,decryptByRSA,encrypt,decrypt,testRsa} fr…

c++多态(虚函数)机制

c多态发生的两个条件 c多态发生的两个条件(牢记): 1、派生类继承含有虚函数的基类,并对基类的虚函数发生重写 2、通过 基类的指针或引用 调用派生类虚函数 多态过程详解 一个案例(黑马)-分析条件一&#x…

基于C#实现最长公共子序列

一、作用 最长公共子序列的问题常用于解决字符串的相似度,是一个非常实用的算法,作为码农,此算法是我们的必备基本功。 二、概念 举个例子,cnblogs 这个字符串中子序列有多少个呢?很显然有 27 个,比如其…

IDEA运行 支付宝案例

我 | 在这里 🕵️ 读书 | 长沙 ⭐软件工程 ⭐ 本科 🏠 工作 | 广州 ⭐ Java 全栈开发(软件工程师) 🎃 爱好 | 研究技术、旅游、阅读、运动、喜欢流行歌曲 🏷️ 标签 | 男 自律狂人 目标明确 责任心强 ✈️公…

庖丁解牛:NIO核心概念与机制详解 01 _ 入门篇

文章目录 Pre输入/输出Why NIO流与块的比较通道和缓冲区概述什么是缓冲区?缓冲区类型什么是通道?通道类型 NIO 中的读和写概述Demo : 从文件中读取1. 从FileInputStream中获取Channel2. 创建ByteBuffer缓冲区3. 将数据从Channle读取到Buffer中 Demo : 写…

优思学院|什么是精益生产管理?从一个生活上的故事出发来说明。

你关掉电脑,离开办公室。 一个小时后,你进入家门和孩子们在一起。 你和家人一起吃晚饭。 你的老板打电话来查看你的项目进展。 你哄孩子入睡并给他们读个故事。 作为一个负责任的父母,你想要与孩子们的互动时间增加并提高生活的质量&…

flink 查看写入starrocks的数据量 总行数

针对该connector: https://github.com/StarRocks/docs.zh-cn/blob/main/loading/Flink-connector-starrocks.md

使用 uWSGI 部署 Django 应用详解

概要 部署 Django 应用到生产环境是一个至关重要的步骤,其中选择合适的 WSGI 服务器对于确保应用的稳定性和性能至关重要。uWSGI 是一个流行的选择,它不仅高效、轻量,还非常灵活。本文将详细介绍如何使用 uWSGI 来部署 Django 应用&#xff…

力扣C++学习笔记——C++ assign全面解析

cassign是一个C20标准中新增的头文件,主要提供了assign函数,用于将一个容器内的元素按照特定规则赋值到另一个容器中。它是STL容器操作的重要一环,具有高效、简洁、易用的特点。 assign函数有多个版本,一般使用的是容器类型相同或…

掌握Python中classmethod的妙用,提升代码灵活性与可维护性

概要 在Python编程中,classmethod是一种非常有用的装饰器,它可以将一个方法转换为类方法,使得该方法可以通过类名或实例名直接调用,而不需要传入self参数。通过合理使用classmethod,我们可以提高代码的灵活性、复用性…

基于C#实现字符串相似度

一、概念 对于两个字符串 A 和 B,通过基本的增删改将字符串 A 改成 B,或者将 B 改成 A,在改变的过程中我们使用的最少步骤称之为“编辑距离”。比如如下的字符串:我们通过种种操作,痉挛之后编辑距离为 3,不…

8.6 矢量图层点要素基于规则(Rule-based)渲染使用

文章目录 前言基于规则(Rule-based)QGis代码实现 总结 前言 前面介绍了矢量-点要素-单一符号、矢量-点要素-分类符号以及矢量-点要素-分级符号的使用本章介绍如何使用基于规则的渲染说明:文章中的示例代码均来自开源项目qgis_cpp_api_apps …

00后如何组织双十一大促看这一篇就够了! | 京东云技术团队

引言 大家好,我是王蒙恩,一名“整顿职场”的00后。作为一名去年刚刚加入京东的校招生,我有幸成为本次CDP平台的11.11备战负责人。虽然早在实习的时候就经历过大促,但是真正组织整个部门的备战还是很难忘的。于是提起笔&#xff0…

二阶段提交

二阶段提交 二阶段提交(英语:Two-phase Commit)是指,为了使基于分布式系统架构下的所有节点在进行事务提交时保持一致性而设计的一种算法(Algorithm)。 二阶段过程 在两阶段提交过程中,主要分为了两种角色协调者&…

实时监控电脑屏幕的软件丨同时查看12台电脑屏幕

Hello 大家好 又见面啦 今天给大家推荐两款比较实用的监控电脑使用情况、屏幕的软件! 软件一 实时性能监控 从软件名就可以看出来,这是一款电脑性能监测工具。它可以实时监测内存、CPU、磁盘占用情况,也能一键结束进程,给电脑提…

MES管理系统与ERP系统的实施顺序与决策

在现今的数字化时代,制造企业纷纷寻求通过先进的系统来提升运营效率。其中,ERP管理系统与MES管理系统被誉为是数字化转型的两大利器。然而,在推进这两个系统时,企业常常面临一个关键问题:究竟应该先实施哪一个系统&…

ASUS华硕ROG幻13笔记本电脑GV301QE原厂Windows10系统

链接:https://pan.baidu.com/s/1aPW0ctRXRNAhE75mzVPdTg?pwdds78 提取码:ds78 华硕玩家国度幻13笔记本电脑锐龙版Ryzen 7 5800HS,显卡3050 3050Ti,3060,3060Ti,3070,3070Ti 原厂W10系统自带所有驱动、出厂主题壁纸、系统属性专属LOGO标志、Office办…

Python武器库开发-flask篇之error404(二十七)

flask篇之error404(二十七) 首先&#xff0c;我们先进入模板的界面创建一个404的html页面 cd templates vim 404.html404.html的内容如下&#xff1a; <h1>error!!!</h1>在 Flask 应用程序中&#xff0c;当用户访问一个不存在的页面的时候&#xff0c;会出现 4…