修改vux组件的css样式

html-css07

修改vux组件的css样式,第1张

我们经常用vux的组件快速开发移动端的项目,比如常用的datetime组件,会遇到这样的问题。

而我们的需求要求value值靠左而非靠右,但datetime没有提供移动value值位置的属性,那怎么办呢?

首先需要找到经过vue处理后的值,

一种方法我们可以在全局上修改,简单粗暴。

vue也给我们提供了局部修改的方法:

这最终会被vue编译成:

可以看到字体变成向左靠齐,当然,可以用这种方法,修改任一内置组件,其他ui框架的修改方法也类似。

该系统自带浏览器 打开vux demo页面出现同样的问题

在 package.json 里更新 vux 和 vux-loader,修改 browers。

要注意在修改 browserslist 时,浏览器的版本号要放在安卓,ios的版本号下,不然会报错。

来自 https://github.com/airyland/vux/issues/2531

在使用vux开发手机页面时,引入vux的公共样式less一直报错,通过各种百度,Google都没有解决,走了很多弯路。最后才发现钻牛角尖了,可以换一种方法引入。

1、报错的使用:在App中

@ ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vux/src/styles/reset. less 3:10-115 @ ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style- compiler?{"id":"data-v-942b00fc","scoped":false,"hasInlineConfig":true}!./~/vux- loader/src/style-loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./ src/App.vue @ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/ vue-loader/lib/style-compiler?{"id":"data-v-942b00fc","scoped":false,"hasInlineC onfig":true}!./~/vux-loader/src/style-loader.js!./~/vue-loader/lib/selector.js?t ype=styles&index=0!./src/App.vue @ ./src/App.vue @ ./src/main.js @ multi ./build/dev-client ./src/main.js @import '~vux/src/styles/reset'

2、最终解决方法,在main.js中

require('../node_modules/vux/src/styles/reset.less')