因为一个项目的原因从scoped转用module,
首先说一下什么是scoped
用法:
<style scoped>
h1 {
color:
#f00;
}
</style>
编译后为
h1[data-v-4c3b6c1c] {
color:
#f00;
}
即在元素上加
唯一属性
加这个的原因,简单点说就是增加权重,我的项目是用Vue写的,UI框架使用的是ElementUI,Vue属于单页面项目,所以为了不让每个组件的样式就需要加scoped 使作用域只能作用域dang当前组件,那么问题来了,当我想要geng更改ElementUI的部分组件时发现部分样式无法起作用,但是这也难不倒我,我就不停的加!important增加权重,但是用着用着我发现不是那么回事儿,暂且不说满屏的importanty影响写代码感受,有的顽固样式还是不能唯我所用,不过还是难不倒我,我就用>>>继续增加权重,加的你不能拒绝我的热情为止,但是仍然还是有那些顽固之徒不能就擒,没辙了,无奈之下写到全局样式中去了,但是写到最后,全局样式浩浩荡荡几千行,鱼龙混杂,而且项目优势协同开发,容易造成代码冲突,所以才在偶然之下发现了module
下面我们的正题来了,module是什么
具体详细解释可查看官网vue-loader
module牛逼在哪儿呢?
来上例子
<template>
<p :
class
=
"$style.gray"
>
Im gray
</p>
</template>
<style module>
.gray {
color: gray;
}
</style>
编译后是
<p
class
=
"gray_3FI3s6uz"
>Im gray</p>
.gray_3FI3s6uz {
color: gray;
}
看到没,这货不是增加权重,而是直接改变你的class
而且还能直接在js中调用
具体怎么用呢可以去瞅瞅官网
好啦,妈妈再也不用担心我改不动样式啦