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实现夜间模式)
在vue下面创建新页面并引入样式(图文讲解)
1.在components下面新建一个grid.vue的文件,在文件里放入内容
2.在css里新建一个grid.css文件,把grid.vue需要的样式放进来
3.在router里的index.js里import,import 文件名 from 文件存放的路径;并在routes下面写好路由
4.在main.js里引入grid.css的样式,import '路径名'
vue 怎么require css文件
首先,引入公共样式时,我们在“main.js”里使用AMD的方式引入,即
?
1
require('./assets/css/main.less');
require();
这时,我们会抛出一个错误,是因为我们没有写解析的依赖,webpack不知道怎么解析
这时,我们要填写上依赖,
?
1
require('!style!css!less!./assets/css/main.less');
在很多以前的博客里都是以上写法,这个是Vue 2.0刚开始的,现在使用会报错;下面是正确写法
?
1
require('!style-loader!css-loader!less-loader!./assets/css/main.less');
在以前配置到这里,就万事大吉了,也可以开始引入css文件了,然后现在到这里还会报错
当出现以上错误时,说明你的项目里缺少依赖;
?
1
npm install style-loader --save
这时你就可以引入css文件了;
网站栏目:vue样式表引入css,vue添加样式
转载注明:http://ybzwz.com/article/dsdjech.html