详解从vue-loader源码分析CSS Scoped的实现

标题：详解从vue-loader源码分析CSS Scoped的实现

文章内容：

简介

在Vue项目中，使用作用域CSS是非常常见的需求。Vue.js官方提供了一个vue-loader插件，可以帮助我们快捷实现CSS作用域。本文将详细讲解vue-loader源码分析CSS Scoped的实现过程。

CSS Scoped实现原理

CSS Scoped即为CSS作用域，用于将CSS样式限定在特定的组件中。Vue.js利用了CSS预处理器scoped的特性实现CSS Scoped。当使用vue-loader时，会自动将模板的CSS样式加上类似于“data-v-****”的唯一属性，然后在渲染组件时会根据这个属性自动处理CSS，保证组件之间的样式互不干扰。

vue-loader源码分析CSS Scoped的实现

vue-loader解析过程

vue-loader主要负责解析.vue文件，我们来看一下.vue文件是如何被解析的。首先寻找template标签内的CSS代码块，将代码块嵌入到Vue组件的style标签中，并添加一个唯一属性，比如：

<!-- 原 template 中的代码 -->
<template>
  <div>Hello, World!</div>
</template>

<!-- 原 style 中的代码 -->
<style>
  h1 {
    color: red;
  }
</style>

<!-- 解析后的代码 -->
<template>
  <div>Hello, World!</div>
</template>

<style data-v-****>
  h1[data-v-****] {
    color: red;
  }
</style>

然后将template中的代码块用正则表达式匹配出来，交给extractCSS函数进行处理。

extractCSS函数实现CSS Scoped

extractCSS函数主要负责处理.vue文件的CSS代码，具体过程可以分为以下几步：

判断是否为scoped样式。

当检测到style标签上有data-v属性时，就说明该样式是scoped样式。例如：<style data-v-****>h1 {color: red;}</style>。

创建uniqClass类选择器。

当检测到该组件中存在scoped样式，就会调用createScopedId函数生成一个唯一类名。例如：data-v-****。

匹配样式中的选择器。

把样式中的选择器都提取出来，然后添加前缀，于是当我们在template中写：

<h1>Hello, World!</h1>

<style scoped>
h1 {
  color: red;
}
</style>

就会变成：

<h1 class="data-v-****">Hello, World!</h1>

<style>
h1.data-v-**** {
  color: red;
}
</style>

添加样式到style标签中。

将样式添加到组件的style标签中，于是当我们在template中：

<h1>Hello, World!</h1>

<style scoped>
h1 {
  color: red;
}
</style>

就会变成：

<h1 class="data-v-****">Hello, World!</h1>

<style>
h1.data-v-**** {
  color: red;
}
</style>

示例说明

示例一

在组件中定义一个data-v属性，确保CSS在该组件内生效，具体代码如下：

<template>
  <div class="demo">
    <h1>Hello, world!</h1>
  </div>
</template>

<style data-v-abc>
  .demo h1 {
    color: red;
  }
</style>

我们看到这里，style标签中添加了一个data-v属性abc，它保证了 h1 标签的CSS样式生效。如果我们去除这个data-v属性，则 h1 标签中的样式将无法生效。

示例二

我们在组件里写一个:class属性并加以判断的属性值，然后利用vue中自带的class绑定方法将这个:class属性绑定到该组件上，具体代码如下：

<template>
  <div :class="cls">
    <h1>Hello, world!</h1>
  </div>
</template>

<style scoped>
  .is-demo h1 {
    color: red;
    font-size: 20px;
  }
</style>

<script>
  export default {
    name: 'demo-component',
    props: {
      isDemo: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      cls() {
        return {
          'is-demo': this.isDemo
        }
      }
    }
  }
</script>

在代码中，我们定义了一个名为isDemo的props属性来接收传进来的布尔值参数，然后在computed计算属性中定义类对象，当isDemo为true时，类对象中添加一个名为is-demo的class，这时候内部的样式就生效了，同时在vue实例中将cls属性绑定到该组件上，让class属性生效。