首页 > 其他分享 >Vite配置第三方组件全局样式遇坑

Vite配置第三方组件全局样式遇坑

时间:2024-01-30 17:58:36浏览次数:27  
标签:Toast index Vant 遇坑 less 样式 组件 Vite

项目使用了Vant组件库,想去改变全局的Toast样式

有一个样式文件index.less,里面进行了Vant相关样式调整。希望通过构建,将其引入到自己的组件中

开始通过preprocessorOptions进行引入,发现对Vant组件修改的样式不起效果,但是普通标签被修改样式后是有效果的

preprocessorOptions: {
    less: {
        javascriptEnabled: true,
        additionalData: `@import '${resolve(__dirname, `./assets/style/index.less`)}';`
    }
}

 后来在main.js文件中单独引入文件却能生效

import '@assets/style/index.less'

 

然后通过元素检查,发现Toast组件是没有使用scpoed属性,但是自己的组件是使用了scoped属性

两个问题

  1. 为什么在构建中引入没有效果
  2. 为什么在main.js中引入有效果,我是scpoed但是子组件(Toast)不是scoped

标签:Toast,index,Vant,遇坑,less,样式,组件,Vite
From: https://www.cnblogs.com/karle/p/17997645

相关文章

  • Vue3+Vant+Vite H5移动端开发(二)
    vue3项目创建使用vue创建项目命令npmcreatevue@latest基础配置配置IP和localhost打开项目,修改'package.json'文件下的‘scripts’配置--host0.0.0.0显示ip地址可以打开项目--open启动项目,在浏览器中自动打开"scripts":{"dev":"vite--host0.0.0.0......
  • vue3+ts+vite项目中使用vite-plugin-svg-icons插件处理svg
    1.安装依赖:npminstallvite-plugin-svg-icons-D2.vite.config.ts中配置:import{createSvgIconsPlugin}from'vite-plugin-svg-icons'//在exportdefault({command,mode}:ConfigEnv):UserConfig中的plugins数组中添加代码plugins:[createSvgIconsPlugin......
  • vue父子组件数据传递props中Object和Array如何设置默认值
      props:{field:{type:String},index:{type:Number,default:0},isAble:{type:Boolean,default:true},rowData:{type:Object,default:function(){return{};......
  • nodejs 组件引入
    constfs=require("fs");constnodePath=require("path");//import*asfsfrom"fs";constfolder="./";constcondition=["node_modules","compile"];letarr:string[]=[];main(folder,......
  • HT UI 5.0,前端组件图扑是认真的
    为顺应数字时代的不断发展,图扑HTUI5.0在原有功能强大的界面组件库的基础上进行了全面升级,融入了更先进的技术、创新的设计理念以及更加智能的功能。HTUI5.0使用户体验更为直观、个性化,并在性能、稳定性和安全性等方面达到新的高度。HTUI5.0的改版升级,是团队对于用户需......
  • HT UI 5.0,前端组件图扑是认真的!
    为顺应数字时代的不断发展,图扑HTUI5.0在原有功能强大的界面组件库的基础上进行了全面升级,融入了更先进的技术、创新的设计理念以及更加智能的功能。HTUI5.0使用户体验更为直观、个性化,并在性能、稳定性和安全性等方面达到新的高度。HTUI5.0的改版升级,是团队对于用户需求......
  • 既可以通过从层次结构更高层组件(如 FilterableProductTable)开始“自上而下”构建,也可
    既可以通过从层次结构更高层组件(如FilterableProductTable)开始“自上而下”构建,也可以通过从更低层级组件(如ProductRow)“自下而上”进行构建。在简单的例子中,自上而下构建通常更简单;而在大型项目中,自下而上构建更简单。为什么这么说呢?合理吗?在构建React应用时,"自上而下"(Top-Do......
  • 了解鸿蒙OS Text组件
    文本(Text)是用来显示字符串的组件,在界面上显示为一块文本区域。Text作为一个基本组件,有很多扩展,常见的有按钮组件Button,文本编辑组件TextField。使用Text创建Text<Textohos:id="$+id:text"ohos:width="match_content"ohos:height="match_content"o......
  • EVE-NG的环境导入IOL组件
    IOL或IOSOnLinux,也称为IOU或IOSOnUnix。IOL是一个模拟器,一般仅思科使用。IOL指为i386架构编译的Linux版本。IOU指为Sparc架构编译的Unix(Solaris)版本。由于IOL是内部IOS版本,因此IOL只能由Cisco授权客户使用。需要注意,这里的IOS区别于苹果IOS,是指互联操作系统是思科网络设备的操......
  • 组件复写:搜索人员栏,状态默认为全部
    要复写的位置如下: 整体代码:ecodeSDK.overwritePropsFnQueueMapSet('WeaSelect',{//组件名fn:(newProps)=>{//newProps代表组件参数//进行位置判断if(newProps.ecId!='_Route@mb5ed9_WeaSwitch@cbdl58@8_SelectItem@dv4xjh_WeaSelect@3vudrr'){......