18-组件样式

组件样式

组件中样式的冲突

组件中定义的样式，默认是全局都有效的，vue最终会把这些样式汇总到一起。

组件的样式最终汇总出来的顺序，取决于在父组件中引入的顺序。

例如：School中定义的样式：

在Student.vue中定义的样式：

如果在App组件中同时引入了School、Student两个组件，则这两个组件的样式都会被引入。因为这两个组件的模板class都叫demo，就会产生冲突。

模板最终使用的background-color取决于哪个组件在App中最后被引入：

import Student from './components/Student'

// 先引入Student,然后引入School，则最后的background-color使用的是School中的样式
import School from './components/School'

如果改为先引入School再引入Student，样式就会使用Student定义的样式：

import School from './components/School' 
// 最后引入Student组件，则最后冲突的样式使用的是Student的样式
import Student from './components/Student'

限制样式作用域

使用scoped属性限制该样式只对当前组件有效：

<!-- 使用了scoped限制了作用域，该样式只会对当前组件有效 -->
<style scoped>
    .demo {
        background-color: orange;
    }
</style>

实现原理：Vue会给该组件添加一个data-v-随机数的属性，然后在样式上也添加该属性的筛选：

.data[data-v-xxxxxx]。这样这个样式就只会对这个组件有效了。

加了scoped之后，这个样式只会对当前组件有效，对当前组件引入的子组件无效。

使用预编译语言编写样式

可以使用

如果要使用 less 编写样式，则需要设置：（不配置时，默认使用的css）

除此之外，还需要安装 less-loader：

最新版的less-loader只支持webpack5，但是目前Vue脚手架中引入的webpack是4.46版，所以不能直接下载最新版的less-load，需要加上版本限制。

# 查看webpack的所有版本
npm view webpack versions

# 查看less-loader的所有版本
npm view less-loader versions

# 限制安装的less-load版本为7.x
npm i less-loader@7

如果报错缺少less，则需再安装less：

npm i less

先赞后看，养成习惯！！！^ _ ^ ❤️ ❤️ ❤️
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！