在 Vue 中,关于样式有几个规范:
尤其是 scoped 很重要,因为 Vue 并不是我们传统的一个页面一个页面的文件,如果不 scoped,会发生样式干扰。
假如我们使用了一个 van-grid-item 组件,我们通过检查,发现生成 HTML 的结构是:
于是我们写样式:
我们会发现第一个生效了,但是第二个没生效,这是因为 Vue 只认组件本身那层 class,其内部继续产生的 class 是不认的,怎么解决呢?加上 /deep/ 让其作用域往下钻,如下:
注意:Vue 中<style lang="less" scoped=""> 是正确的写法,<style type="less" scoped> 是错误的写法。