解决vue 单文件组件中样式加载问题


Posted in Javascript onApril 24, 2019

在写单文件组件时,一般都是把标签、脚本、样式写到一起,这样写个人感觉有点不够简洁,所以就想着把样式分离出去。

采用import加载样式

在局部作用域(scoped)采用@import加载进来的样式文件,想法是美好的。以为这样加载进来的样式文件也只对当前组件有效;可现实是残酷的,这样加载进来的样式无法限制其作用域。

<style scoped>
  @import "样式文件";
</style>

解决方案

采用 src属性加载样式。

<style src="样式路径" scoped></style>

PS:关于vue单文件组件中样式的问题

在写单文件组件的项目时,遇到过这样的问题。某一个样式类,明明我只写了两个padding,但是在我用webpack构建之后,莫名其妙的多出了很多其他的样式。

后来,无意中看见别人的提问中,说如何解决单文件组件中样式同名的问题。

我就想,会不会是不同的.vue文件里使用了同名类的原因。

于是,我在style标签后面加上了scoped这个关键字之后,再npm run build,果然好了。

原因:

不加scoped表示样式是全局共享的。

加上了scoped就是这个样式只能在这个.vue文件里面有效。

总结

以上所述是小编给大家介绍的解决vue 单文件组件中样式加载问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js 金额文本框实现代码
Feb 14 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
javascript去除空格方法小结
May 21 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
vue图片上传组件使用详解
Dec 23 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 Javascript
vue router 用户登陆功能的实例代码
Apr 24 #Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 #Javascript
vue.js多页面开发环境搭建过程
Apr 24 #Javascript
小程序实现订单倒计时功能
Apr 23 #Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 #Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 #Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 #Javascript
You might like
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
PHP最常用的正则表达式
2017/02/13 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
node+multer实现图片上传的示例代码
2020/02/18 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
python3排序的实例方法
2020/10/20 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
法律专业个人实习自我鉴定
2013/09/23 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
实用的简历自我评价
2014/03/06 职场文书
创业融资计划书
2014/04/25 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
委托收款证明
2015/06/23 职场文书