【踩坑记录】vue单个组件内<style lang="stylus" type="text/stylus" scoped>部分渲染失效
vue组件化应用,近期写的单个组件里有一个的渲染部分样式渲染不上去
因为同结构的其他组件均没有问题,所以排除是.vue文件结构的问题,应该是<style>内部的问题
<style lang="stylus" type="text/stylus" scoped>
.recom
height : 3.5rem
padding-bottom : 40%
.title
margin-top : .2rem
line-height : .8rem
background : #eee
text-indent : .2rem
.img
position : relative
overflow : hidden
float :left
width : 50%
height : 0
margin-bottom :21%
.img-content
width : 3.3rem
height : 2.1rem
margin-top :.2rem
margin-left :.2rem
border-radius : .2rem
.img-info
font-size : .23rem
margin-top : .1rem
text-align : center
</style>
问题解决:
最后发现是class的优先级的问题,因为stylus简化了css写法,所以子级别class(被父元素包裹的元素的class)应该在父级别class后严格缩进两格,否则无法识别。
【踩坑记录】vue单个组件内<style lang="stylus" type="text/stylus" scoped>部分渲染失效的更多相关文章
- vue踩坑记录:[Vue warn]: $attrs is readonly.
今天在用element-ui的DatePicker日期选择器的时候,发现每当点击一次这个组件,控制台就会报警告`[Vue warn]: $attrs is readonly`,但是也不影响实际操作效果 ...
- Taro踩坑记录一: swiper组件pagestate定制,swiperChange中setState导致组件不能滚动。
import Taro, { Component } from '@tarojs/taro'; import { Swiper, SwiperItem, Image, View } from '@ta ...
- [踩坑记录] runtime error: load of null pointer of type 'const int' (leetcode)
leetcode上面做题遇到的错误 原因: 在调用函数时,如果返回值如果是一个常量则没问题.如果返回值若为指针则可能会出现该错误,假如返回的指针地址指向函数内的局部变量,在函数退出时,该变量的存储空间 ...
- [技术博客]iview组件样式踩坑记录
[技术博客]iview组件样式踩坑记录 iview官方文档. 在本次项目开发中,前端项目主要使用vue框架+iview组件构建,其中iview组件在使用过程中遇到了许多官方文档中没有明确说明或是很难注 ...
- VUE使用微信JDK(附踩坑记录)
VUE使用微信分享SDK(附踩坑记录) 微信分享官方文档 安装JS-SDK npm i -S weixin-jsapi 引入包 ES5 写法 const wx = require('weixin-js ...
- 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密
你真的了解字典(Dictionary)吗? 从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...
- manjaro xfce 18.0 踩坑记录
manjaro xfce 18.0 踩坑记录 1 简介1.1 Manjaro Linux1.2 开发桌面环境2 自动打开 NumLock3 系统快照3.1 安装timeshift3.2 使用times ...
- ABP框架踩坑记录
ABP框架踩坑记录 ASP.NET Boilerplate是一个专用于现代Web应用程序的通用应用程序框架. 它使用了你已经熟悉的工具,并根据它们实现最佳实践. 文章目录 使用MySQL 配置User ...
- 复杂业务下向Mysql导入30万条数据代码优化的踩坑记录
从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负责的模块connector就派上了用场. ...
随机推荐
- iOS block 用法
1.定义Block /* 回传void ,参数也是void 的block*/ void (^blockReturningVoidWithVoidArgument)( void ); /* 回传整数,两 ...
- DTcms iis6 伪静态 iis配置方法 【图解】
1.右键点击 要设置网站的网站 2.属性 ——>主目录 ——>配置——> 3.如右侧窗口,找到 .aspx 扩展名——>编辑——>复制 可执行文件的路径——>关闭 ...
- parkingLot
一个支付宝停车支付生活号前端页面 //index.html //自定义键盘 <!DOCTYPE html> <html> <head> <meta chars ...
- js遮罩
1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000 ...
- Resource Management in View Controllers
UIViewController生命周期 UIViewControl是IOS程序中的一个重要组成部分,扮演者一个大管家的身份,管理着程序中的众多视图,今天看看了官方文档并做了如下一些简单的记录: 何时 ...
- 部署zabbix3.2.7,升级到3.4、proxy部署
一.Server安装 可以使用mysql.percona.mariadb等,本例使用mariadb.由于是事后整理,只截取部分命令. #yum install mariadb-server maria ...
- 【转载】Ubuntu终端常用的快捷键
Ubuntu中的许多操作在终端(Terminal)中十分的快捷,记住一些快捷键的操作更得心应手.在Ubuntu中打开终端的快捷键是Ctrl+Alt+T.其他的一些常用的快捷键如下: 快捷键 功能 Ta ...
- Code Force 429B Working out【递推dp】
Summer is coming! It's time for Iahub and Iahubina to work out, as they both want to look hot at the ...
- EL表达式多条件或判断用法
简单记录一EL表达式的判断用法 <c:if test="${(order.status == '06'&& order.type=='02') || (order.st ...
- Python数据集变量及相关含义