浅谈 Vue css scoped & module

提示：相关的官方文档：https://vue-loader.vuejs.org/zh/guide/scoped-css.html

scoped css

先看一段示例代码：

当 style 标签有 scoped 属性时，不要任何 polyfill，vue 会通过使用 PostCSS 将页面样式做以下转换：

  
    
    
  
  
    
    
今天天气不错
    
  

即自动为当前组件添加一个 hash 属性，同时将 style 标签中的相应选择器添加对应的属性选择器，从而避免当前组件定义的样式污染全局样式。

组件下的元素

编辑结果：

    

        

            今天天气不错
        
    
    
今天天气不错

当 style 标签有 scoped 属性时，vue 会为当前组件下所有元素添加 hash 属性。

注意：组件下的元素仅指原生的 html 元素，需要与子组件进行区分。

组件下的子组件

1. 父组件 style 标签添加 scoped 属性，子组件 style 标签不添加 scoped 属性：

Wrapper.vue:

Son.vue:

编译结果：

    今天天气不错
    

        

            子元素标题
        
        
子元素内容
    

由此可知：当父组件 style 标签添加 scoped 属性，子组件 style 标签不添加 scoped 属性时，vue 只会为子组件根元素添加哈希属性，不会为子组件根元素下的元素添加哈希属性，官方对此设计有介绍。

2. 父子组件 style 标签都添加 scoped 属性：

在【1】代码基础上为子组件 style 标签添加 scoped 属性，编译结果如下：

    今天天气不错
    

        

            子元素标题
        
        
子元素内容
    

由此可知：当父子组件 style 标签都添加 scoped 属性时，vue 在【1】的基础上，会为子组件所有元素添加另一个哈希属性。

css module

官方文档有详细介绍，请直接查阅：https://vue-loader.vuejs.org/zh/guide/css-modules.html