vue引入css全局样式,vue引入公共样式
vue+css实现夜间模式
最近项目中要求实现夜间模式,整理一下实现方法。
成都创新互联公司是一家专业的成都网站建设公司,我们专注成都网站建设、网站建设、网络营销、企业网站建设,外链,广告投放为企业客户提供一站式建站解决方案,能带给客户新的互联网理念。从网站结构的规划UI设计到用户体验提高,创新互联力求做到尽善尽美。
ps. 我们的项目是混合开发,所以夜间模式要通过原生交互实现,如果直接是h5项目,则可省去原生交互这块。
step1 原生交互方法
step2 获取模式方法
step3 实现方法
1、使用css大类区分
2、针对不同class类定义css属性全局变量
3、全局引入样式文件(main.js中引入)
4、页面中可定义css私有变量(包含页面中特殊的颜色属性,不止涉及亮度更改的图片)
变量定义规范:--(页面名称)-自定义
建议将白天与夜间模式图片区分两个文件夹存储
5、变量使用规范
总结:
1、注意css变量的使用的兼容性,例如安卓5的手机可能识别不了变量,解决方法:postcss可以试试看
2、如果项目中已使用less,可直接用less来实现,现未发现其兼容性问题(下一篇文章我会写less实现夜间模式)
vuejs的组件化开发中,要怎么自定义class,覆盖原有的css样式
el-table-column并不是一个dom节点,所以infotext这个类究竟用在哪,需要看下el-table-column这个组件的实现才知道。
用了第三方组件的必然都会遇到你这样的问题,我说下我的解决方法,不一定是好的。
一个vue文件可以写多个style/style,加上socped代表本组件的样式,不污染全局。如果需要覆盖第三方组件样式,则不能加scoped,因此需要另写一个style.xxx-component{...}/style,这里用一个大类包裹防止污染全局。
接着,我用比较笨的方法(有好的方法请告知),就是打开f12检查究竟要覆盖哪些样式,然后写在没有加scoped的style里即可。
其实一些好的第三方UI库都有提供自定义样式的方法的,这样实现起来才是最便捷的。
[img]CSS 关于样式穿透
前两天在项目中遇到一个问题,需要手动去修改引入的第三方组件的CSS样式,我第一想法就是直接在组件上新增一个自定义的class去覆盖原有的样式,结果当然是行不通的(不然我现在也不会在这里写这篇)。
于是我查了一下,是因为我在vue组件里面将设置成了局部样式,局部样式只在当前组件生效,对引入的其他组件是无法起作用的。然后我试了一下,把 scoped 去掉就行了。
或者在组件里面写多一份全局样式
但是如果不在style里面写 scoped ,直接写成全局样式,最后可能会面临多个组件之间样式污染的问题。如何使得局部样式可以覆盖到引入的第三方组件呢,我想到以前涉及过的一个名词 样式穿透 ,立刻实践了一下,果然就成了。
样式穿透 需要定义一个外层的style,通过 可以使得socped属性下的的样式穿透到全局, 外层 第三方组件 或者 外层 /deep/ 第三方组件 。 是 /deep/ 的别名,但是在sass之类的样式预处理器之中无法正确解析。
Vue怎么局部引入css
vue只是一个js框架,和你引用css没有太大的关系,和普通的js一样的处理方式就好。
例如你可以新建一个link标签,然后插入到head标签下之类的。
网页题目:vue引入css全局样式,vue引入公共样式
文章网址:http://myzitong.com/article/dsopicg.html