从scoped转向css module

因为一个项目的原因从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中调用

具体怎么用呢可以去瞅瞅官网

好啦，妈妈再也不用担心我改不动样式啦