vue+css实现夜间模式

html-css012

vue+css实现夜间模式,第1张

最近项目中要求实现夜间模式，整理一下实现方法。 ps. 我们的项目是混合开发，所以夜间模式要通过原生交互实现，如果直接是h5项目，则可省去原生交互这块。 step1 原生交互方法 step2  获取模式方法 step3 实现方法1、使用css大类区分 2、针对不同class类定义css属性全局变量 3、全局引入样式文件（main.js中引入） 4、页面中可定义css私有变量（包含页面中特殊的颜色属性，不止涉及亮度更改的图片）        变量定义规范：--（页面名称）-自定义         建议将白天与夜间模式图片区分两个文件夹存储5、变量使用规范总结： 1、注意css变量的使用的兼容性，例如安卓5的手机可能识别不了变量，解决方法：postcss可以试试看 2、如果项目中已使用less，可直接用less来实现，现未发现其兼容性问题（下一篇文章我会写less实现夜间模式）

首先，引入公共样式时，我们在“main.js”里使用AMD的方式引入,即

?

1require('./assets/css/main.less')

require(http://r.yuzhua.com)

这时，我们会抛出一个错误，是因为我们没有写解析的依赖，webpack不知道怎么解析

这时，我们要填写上依赖，

?

1require('!style!css!less!./assets/css/main.less')

在很多以前的博客里都是以上写法，这个是Vue 2.0刚开始的，现在使用会报错；下面是正确写法

?

1require('!style-loader!css-loader!less-loader!./assets/css/main.less')

在以前配置到这里，就万事大吉了，也可以开始引入css文件了，然后现在到这里还会报错

当出现以上错误时，说明你的项目里缺少依赖；

?

1npm install style-loader --save

这时你就可以引入css文件了；

按需组件引入吧，这样会减少不必要的css，当然你每个组件的css要独立出来，而且如果使用webpack 的vue-loader处理 即使重复引用同一个组件css也是同用一份，不会额外的复制多个. CSS规则的前面；@import规则条件规则组中。