Vue2(笔记31) - 脚手架 - scoped

scoped

样式的作用域，每个组件都有独立的样式，最终都会打包合并，难免会重名导致页面样式混乱，可以给每个组件的样式加上 scoped 限定样式的作用域只限于当前组件；

改下 school.vue

<template>
    <div class="demo">
        <h2>学校名称：{{ name | mySlice}}</h2>
        <h2>学校地址：{{ address }}</h2>
        <h2>学年：{{year}}</h2>
    </div>
</template>

<script>
...
};
</script>
<style>
    .demo{
        background-color: skyblue;
    }
</style>

提示1：省略了 script 里的代码；

再改下 student.vue

<template>
    <div class="demo">
        <h2>学员名称：{{ name }}</h2>
        <h2>学员年龄：{{ age }}</h2>
    </div>
</template>

<script>
export default {
...
};
</script>
<style>
    .demo{
        background-color: orange;
    }
</style>

两个组件都定义了 demo 样式，样式背景都不同，这种冲突会导致只有一个生效，在app.vue 先引入的组件样式，会覆盖后引入的样式；

// 引入组件
import school from "./components/school.vue";
import Student from "./components/student.vue";

所以，student.vue 里的样式会覆盖 school.vue 中样式，背景只会显示 "orange"：

解决样式冲突的办法就是在定义样式时，添加  scoped 关键字，指定作用域：

school.vue

<style scoped>
    .demo{
        background-color: skyblue;
    }
</style>

student.vue

<style scoped>
    .demo{
        background-color: orange;
    }
</style>

看下效果：

看下元素结构：

似乎是给每个组件都定义了不同的标识，以区分其不同的样式；

app.vue 组件中的 scoped 

如果在app.vue 组件中，也引入scoped的话，又会覆盖所有组件中的定义；

app.vue

<style scoped>
    .demo{
        background-color: #f30;
    }
</style>

这样又会引起冲突，所以在 app.vue 写样式，就不要添加 scoped 关键字了；

预编译语言

在脚手架环境中使用 Less 等预编译语言写样式，可以这样指定：

<style lang="less" scoped>
    .demo {
        .title {
            font-size: 40px;
        }
        &:hover {
            background-color: skyblue;
        }
    }
</style>

提示：lang="less" ，是指定预编译语言为 less ；

提示：预编译语言有很多种，如： less、sass、stylus 等

关于Less可以看下：​​Less 简介、安装和语法​​

less版本冲突

指定的 less 可能不被识别，提示安装  less-loader 插件；

那可以执行：看一下 webpack 的版本

> npm view webpack version
或
> npm view webpack versions

看一下 当前的 webpack 版本和webpack 的所有版本；

一般 less 8、9的版本支持 webpack 5+ ，如果使用的是 webpack 4+，就安装低一些的 less 版本；

> npm i less-loader@7

指定较低的版本；