vue引入css全局样式,vue引入公共样式

vue+css实现夜间模式

最近项目中要求实现夜间模式，整理一下实现方法。

ps. 我们的项目是混合开发，所以夜间模式要通过原生交互实现，如果直接是h5项目，则可省去原生交互这块。

step1 原生交互方法

step2  获取模式方法

step3 实现方法

1、使用css大类区分

2、针对不同class类定义css属性全局变量

3、全局引入样式文件（main.js中引入）

4、页面中可定义css私有变量（包含页面中特殊的颜色属性，不止涉及亮度更改的图片）

        变量定义规范：--（页面名称）-自定义

        建议将白天与夜间模式图片区分两个文件夹存储

5、变量使用规范

总结：

1、注意css变量的使用的兼容性，例如安卓5的手机可能识别不了变量，解决方法：postcss可以试试看

2、如果项目中已使用less，可直接用less来实现，现未发现其兼容性问题（下一篇文章我会写less实现夜间模式）

相关问答

Q1: 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]

Q2: CSS 关于样式穿透

前两天在项目中遇到一个问题，需要手动去修改引入的第三方组件的CSS样式，我第一想法就是直接在组件上新增一个自定义的class去覆盖原有的样式，结果当然是行不通的（不然我现在也不会在这里写这篇）。

于是我查了一下，是因为我在vue组件里面将设置成了局部样式，局部样式只在当前组件生效，对引入的其他组件是无法起作用的。然后我试了一下，把 scoped 去掉就行了。

或者在组件里面写多一份全局样式

但是如果不在style里面写 scoped ，直接写成全局样式，最后可能会面临多个组件之间样式污染的问题。如何使得局部样式可以覆盖到引入的第三方组件呢，我想到以前涉及过的一个名词 样式穿透 ，立刻实践了一下，果然就成了。

样式穿透 需要定义一个外层的style，通过 可以使得socped属性下的的样式穿透到全局， 外层 第三方组件 或者 外层 /deep/ 第三方组件 。 是 /deep/ 的别名，但是在sass之类的样式预处理器之中无法正确解析。

Q3: Vue怎么局部引入css

vue只是一个js框架，和你引用css没有太大的关系，和普通的js一样的处理方式就好。

例如你可以新建一个link标签，然后插入到head标签下之类的。