[新手坑] 01.Vue模板内引入的组件样式覆盖失效

Pines_Cheng 发布于2019-08-29 15:05 / 789人阅读

摘要：新手坑模板内引入的组件样式覆盖失效作为一名刚接触的菜鸟开发过程中遇到一些小坑又很难搜索的到还是记录下来分享给有遇到过类似问题的人项目中假设用到这个库具体引入组件啥的我就不详细说了直接看代码以上代码的写法不仔细看的话通过页面来看组

[新手坑] 01.Vue模板内引入的组件样式覆盖失效

作为一名刚接触Vue的菜鸟, 开发过程中遇到一些小坑又很难搜索的到, 还是记录下来. 分享给有遇到过类似问题的人.

Vue项目中假设用到Vant.js这个UI库, 具体引入组件啥的我就不详细说了, 直接看代码:

以上代码的写法不仔细看的话, 通过页面来看, my-btn组件实际上是Button, 而Vant的Button会生成类似如下:

其中的van-button的确宽度变成600px了, 而这个van-button__text却没有反应. 似乎一下子就傻眼了. 去掉scoped才有效果, 可是为啥要把这个作用域去了才行. 这个不符合我们需求, 因为这样会造成全局污染. 我仅仅是想要在这个页面中的按钮文本字体发生改变!

问题原因

scoped是必不可少的, 但是我写了这个样式为何无法生效? 原因很简单, 因为当前样式仅适用于当前Vue模板的, 而模板中引入的其他组件其实是无法被渲染的.

解决方案

因此对于模板中引入第三方UI框架的样式如何改写, 正确方式是写一个优先级高于原组件的全局样式来覆盖默认样式, 比如

{{msg}}

完整的代码如下

当然这里只是示例, 个人并不建议在模板上写多个style块, 所以我的做法一般还是在assets目录内新建一个例如resetui.css文件, 专门存放这些需要被重新修改的样式代码. 并且以组件的类名来进行维护, 比如上面一段, 最后处理好的代码应该是引入一个全局resetui.css, 并且该文件内的样式(我用了PostCSS)例如:

.login {
  .van-button__text {
    font-size: 40px;
  }
}

这样就很好的解决了作用域和组件样式的问题了, 因此理解Vue模板和组件之间的作用域也是至关重要的~

其实这部分内容在官方文档有写, 不过大部分新手在阅读文档后, 并没有真正实践, 所以也就很容易忽略, 这里简单的做了个总结, 希望大家能够注意哦~

我其实也很想能够做到, 当前模版内的scoped样式能够生效于当前模版内的所有组件的办法, 不过似乎是做不到的? 因此目前还是暂时按照上面的解决方案处理吧~

参阅: 官方文档 - Class与Style绑定 - 用在组件上

我了更好的学习Vue-cli, 我在GitHub上建了一个vue-cli-mobile-study项目, 用于记录一些小技巧和坑, 其中记录过程中如果有问题, 也希望大家指出包涵~

下期: 02.Vue开发环境和生产环境样式不一致的问题

GPU云服务器云服务器覆盖样式 html打印样式失效 php引入样式账单限定时间内失效

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113092.html

[新手坑] 02.Vue开发环境和生产环境样式不一致的问题

摘要：新手坑开发环境和生产环境样式不一致的问题上次提到作用域问题导致样是不生效这次讲的是我之前遇到的一个小坑稍不留神就完蛋前阵子做的一个小项目引入了的库外加自己写的很多样式在开发环境下测试完美直接就出来上正式环境发现竟然有多处样式未生效的问题还好 [新手坑] 02.Vue开发环境和生产环境样式不一致的问题上次提到作用域问题, 导致样是不生效, 这次讲的是我之前遇到的一个小坑, 稍不留神就完...

RdouTyping 2019-08-29 15:07 评论0 收藏0
小程序采坑记

摘要：小程序采坑记上手小程序两个月，多多少少遇到一些坑，在此简单地作下总结。但一些人可能会遇过这种情况已知小程序组件默认高度，如果子元素高度过高，不会自适应高度。但实际上真是这样吗其实小程序的组件表现挺奇怪的。擅长微信小程序开发，系统管理后台。小程序采坑记上手小程序两个月，多多少少遇到一些坑，在此简单地作下总结。希望能对那些跟我一样有遇到过同样问题的人提供一点帮助，避免掉进这些坑，少走一...

miya 2019-08-23 18:32 评论0 收藏0
Next.js踩坑入门系列（二）— 添加Antd && CSS

摘要：踩坑入门系列一二添加三目录重构再谈路由陆续更新个人对于脚手架的有一种执念，如果搭建出来就是一个首页标签跳转，实在不是我这个处女座的风格，因此第二步我就想引用框架，相信很多使用的开发者用的也都是这个框架吧。 Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目录重构&&再谈路由陆续更新... 个人对于脚手架的UI有一种执...

lifesimple 2019-08-23 11:38 评论0 收藏0
如何在前端项目中实现热更新

摘要：如果你的项目中使用了的话，你会很幸运，借助插件可以实现项目的热更新。对模板更新的处理目前项目中使用的是的模板引擎。 showImg(https://segmentfault.com/img/bVrAa7);这个是组内一位同学在平时开发中，发现调试不便，为团队开发的热更新工具。很厉害，文章中的技术实现内容也是我了解了他的具体实现思路后，整理出来的。工具源码EHU(esl-hot-upd...

antz 2019-08-19 17:13 评论0 收藏0