debug按钮样式异常「完整版」
大家看这个按钮
他仿照官方 color-ui 的例子写
官方的例子是这样的
然后呢他的样式是这样的
然后他就在群里问这是什么原因
然后在他整理demo的过程中
因为他要删除一些跟这个
问题不相关的一些文件
所以他发现只要删掉这个文件（的引入）
就没有问题了
我们来看一下
就这个文件我们把它先注掉
不引入这个文件
我们再来看一下
好这就可以了
那到底是哪个样式引起的呢
我们先把它放回来
我们打开这个文件哈
大家看这么多
这种情况下我们怎么去定位呢
我们用删代码的方法
现在是520行
我们删到250行（左右）
我们删到这
看一下
刷新
还是不行
我们再删
我们这回再删到这吧
大家看还是不行
一共是97哈我们这回删掉
删到这吧
刷新
还是不行
再删
删到这吧
刷新
还是不行
把这个样式再删掉
嘿可以了
也就是说就这个样式引起的
那这个样式里边都有啥呀
display: flex
box-sizing: boarder-box
然后 flex-direction
我们把这个注释掉
好这回就可以了
也就是说影响这个问题的原因
其实就这个样式
我们把这再恢复回来
520行
去到第一个
把它注掉
刷新
好这就可以了
那这是为什么呢
我们来详细看一下他的样式
大家看这是一个 flex 布局
然后呢他也写了 flex direction
大家看啊
在这里
flex direction
他在
原生的 color-ui 里边是有声明的
大家看他是要用 column 布局的
我们来看官方的例子
flex direction
大家看他也是column布局
但是呢在这里边
如果我们把这句话再放回来
好我们再检查一下元素
大家看
他是 flex direction 等于row布局
也就是说
官方的例子这么写的话
他是
flex direction 等于 column 布局
但是在他的项目里
同样的写法就变成了row布局
也就是说被这个样式所覆盖掉了
那为什么同样是这个写法
这个样式却没有生效呢
那我们就要去看
引用这个两个 css（文件）的地方
这里
他是先引用的color-ui
然后后引用的这个样式文件
那我们试一下把color-ui 放后面引用
还是不可以
那为什么呢
正常的话
我们放到后边都是可以的了
我们先去找一下他最终生成的样式
我们点这里
然后按 option + command + F
或者点这选 search
然后呢我们随便搜一个这里边的样式
比如说随便找一个这样的
大家看在这
那这个样式太多了
我们先把它拷贝出来
到这结束
到这（开始）
好
直接拷贝他是有很多 \n 的
那这样我们去到 Console
然后用 console.log
把它打印出来
大家看！然后把它复制一下
这直接有 copy
（我把它放大一点）
粘贴
好然后我们再搜一下
这个吧
嗯
（flex不行太多了）
我们搜这个吧
在这，大家看！这是6,000多行
也就是说这个（错误的）样式文件被渲染到了
第6,000多行
我们再来看这个（正确的）样式文件
我们再搜一个比较具有特征性的
比如说self-center
这个（正确的）是在4,000多行，也就说：
虽然我们把这个 main.css （正确的）放在了
他下面去引入
但是在最终生成的样式文件中
这个 main.css 还是在它（错误的） 前面
那为什么呢
唯一的区别就是这个（错误的）用了 sass
他用的是 .scss
那在渲染过程中
这种文件一定会经过编译
也就是说：
引擎一定会优先处理原生 css 文件
然后再去编译这种sass文件
所以我们要想让 color-ui 的 css
在最终生成的时候跑到它（qui_weex.scss）的下面
我们有一个办法
我们可以直接把这个文件改成
.scss 文件
我们试试
然后呢我们在这改
引用的时候也改成 scss
好我保存一下
大家看问题就解决了
好今天就到这里
谢谢大家
最后更新于