关于weui的样式不起效的一个经历

最新推荐文章于 2025-04-11 09:26:21 发布
最新推荐文章于 2025-04-11 09:26:21 发布
阅读量5.2k 收藏
点赞数
分类专栏： Vue2.0 文章标签： 个人经历 调试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_32486147/article/details/72628886
版权
在Vue项目的Webpack配置中，遇到WeUI样式部分生效的问题，经过两个小时的调试，发现是由于WeUI样式名与官方Demo存在细微差异导致。解决办法是更新到与官方相同的样式版本或调整引用的样式名。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天做vue的webpack是发现引入了weui却只有部分生效，苦苦检查才发现，原来样式名不同

踩了一个大坑，搞了两个小时多。原因是样式名有很小的改变了与官网demo不一样；下面贴图对比：

第一张是我的1.1.1版本的weui



--------------------官方在线demo-------


微信小程序-weui导入报错和部分样式不显示问题
qq_39640321的博客
08-14 2832
文章目录导入weui.wxss出现的问题weui.wxss部分样式不显示问题 Demo采用了npm导入包的方式，虽然会占用包体积，但是版本稳定，利于操作。 导入weui.wxss出现的问题 解决方法: 拷贝/miniprogram/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style中的weui.wxss放在miniprogram文件夹下，在全局的app.wxss中导入@import 'weui.wxss';即可 Demo代码采用了 [官网CellDe
微信小程序学习指南
weixin_30446197的博客
12-13 3727
作者：初雪链接：https://www.zhihu.com/question/50907897/answer/128494332来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 微信小程序正式公测， 张小龙全面阐述小程序，定档1月9日上线（附90分钟演讲全文） ... 前言：新人第一坑，跳坑指南：修改后，必须保存；ctrl+S； 1：官方工具：http...
weui样式放在本地项目不生效的问题
guofanggang的博客
07-09 795
问题描述 使用映射地址访问本地项目，会导致样式不生效，css 路径加载不到，最调试的时候最好不要用地址映射，而用本地地址，直接访问，切记，切记，这个问题导致我把项目样式来回改了两边，浪费了四天的时间，得不偿失啊， 合理的创建标题，有助于目录的生成 直接输入1次#，并按下space后，将生成1级标题。 输入2次#，并按下space后，将生成2级标题。 以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。 如何改变文本的样式 强调文本 强调文本 加粗文本 加粗文本 标记文本 删除文本 引用文
WeUI 使用教程
最新发布
gitblog_00836的博客
04-11 1006
WeUI 使用教程 weui A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications. ...
微信公众号及小程序开发使用weui无效解决方法
lijie627239856的博客
05-04 7571
在开发微信公众号过程中,对于不熟悉前端的童鞋们来说, 明明引用了css文件,可以就是没有实际效果,瞬间懵逼 其实这个是微信官方文档weui中的版本迭代，只是没有给出明确说明,给出的类名全部是以下这种形式     <a href="#" class="weui_btn weui_btn_mini weui_btn_default">按钮</a> 实际上,应该是...
小程序中修改UI组件样式失效，在子组件中修改样式失效，样式穿透失效
qbbhgn的博客
01-19 1252
微信小程序中的样式穿透是指在组件内部修改父组件的样式。然而，微信小程序的样式规则是有作用域限制的，组件内部的样式只对当前组件生效，无法直接修改父组件的样式。
微信小程序 weui-toast 无样式
yuangegena_Blog
04-30 968
微信小程序 weui-toast 无样式 首先在github上找到weui.wxss:weui才能进行下一步吧。 下载完成将weui.wxss放入小程序目录文件（可以与app.wxss同级） 在app.wxss 引入 weui.wxss： @import "./weui.wxss"; 在需要toast在wxml里面引入组件： <view class="fadeIn"> &lt...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
u012421719的博客
10-24 1万+
本文长期更新
vue使用UI组件时无法修改默认样式问题
way_wan的博客
08-26 356
vue使用UI组件时无法修改默认样式问题 该问题的主要原因是vue文件中style标签上的一个特殊的属性：scoped。 当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。 解决方法一：使用深度作用选择器穿透scoped >>> .wz-ect >>> .van-dropd
ios升级16后 weui样式问题
weixin_45666360的博客
09-22 1650
本来h5应用健健康康，谁知测试的同事更新ios16后，页面直接炸裂，对比版本后，确认是ios升级后导致。经过层层排查发现，出问题代码具体css如下 注释掉text-align后大概正常，可将justify改为left就o勾八k .weui-form-preview__label { float: left; margin-right: 1em; min-width: 4em; max-width: em; color: var(--weui-FG-1); text-align: j
web项目导入的js或jQuery文件路径正确但是无法生效问题
m0_45046813的博客
07-16 3159
问题描述：当一个js或jQuery文件引入页面时，路径是正确的但是无法生效——在浏览器运行这个页面时没有执行jQuery的代码。 解决办法一：可能是浏览器中缓存了你历史的一些纪录，你需要重新刷新浏览器的缓存。 步骤： 1.按组合键快速弹出刷新缓存界面：ctrl+shift+delet。然后清理缓存。 解决办法二： 步骤 1.在idea中选择file->settings中 2.在settings中选择Languages&Frameworks->javaScript->Li
微信小程序 – weui的引入使用方法
01-03
查看weui是否是想要的表单样式，样式大致为： 下载weui 链接：https://pan.baidu.com/s/1jYqX1TEsyPWAqUHLwUm19Q 提取码：kvtc 引入weui （1）将src->style->weui.wxss复制到自己项目里 （2）在app.wxss文件中顶部加上如下代码 /* 这里的里放的是绝对路径，加入把文件放到了项目文件->utils文件夹中这里就是utils/weui.wxss */ @import weui.wxss; （3）在界面中使用相应的class就可以了呢 因为不知道对应的class属性是什么，可以将查看下载的文件
weui.css(最基本的样式库)
08-29
weui是一个专门用于开发手机移动web或微信的样式库，weui.css是其中最基本的样式库
微信小程序样式weui.wxss
04-09
微信小程序样式表提供给大家。11111111111111111111111111111111111
组件嵌套组件时引用外部的wxss失效问题
duo_shine的博客
05-09 993
需求是这样的，我有一个页面是公用的，我给抽成组件了，内部使用了weui提供的half-screen-dialog组件，但是在组件的wxss引入外部的wxss文件时并没有生效，如下 @import "../../../miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss"; 遂回去看小程序的文档，在自定义组件那里看到解决方法是： Component({ options: { styleIsolation: 'shared'
WeUI 入门教程
热门推荐
黄沙百战穿金甲，不破楼兰终不还。
02-24 7万+
WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。WeUI 是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。weui 我们只需要他的样式,下面demo下载地址：http://download.youkuaiyun.com/detail/comet
微信小程序weui导入项目的各种坑
chduguxue的专栏
01-20 1万+
微信小程序使用weui，使用npm方法构建
WeUI—微信官方UI库
weixin_34348174的博客
10-29 5323
WeUI 为微信 Web 服务量身设计 概述 WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。 使用 方法一： 使用bower进行安装 bower install --save weui ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值