Vue中对比scoped css和css module的区别

一、css module

模块化原理

为所有类名重新生成类名，有效避开了css权重和类名重复的问题。css 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;
}

使用步骤

• 向 css-loader 传入 modules: true 来开启CSS Module

module: {
    rules: [
      // ... 其它规则省略
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // 开启 CSS Modules
              modules: true,
              // 自定义生成的类名
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }

• 在 <style> 上添加 module 特性

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

• 模板中通过一个动态类绑定来使用它

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

<template>
  <div>
    <p :class="{ [$style.red]: isRed }">
      Am I red?
    </p>
    <p :class="[$style.red, $style.bold]">
      Red and bold
    </p>
  </div>
</template>

• 在js中使用

<script>
export default {
  created () {
    console.log(this.$style.red)
    // -> "red_1VyoJ-uZ"
    // 一个基于文件名和类名生成的标识符
  }
}
</script>

特殊情况

• 只想在某些 Vue 组件中使用 CSS Modules，你可以使用 oneOf 规则并在 resourceQuery 字符串中检查 module 字符串：

{
  test: /\.css$/,
  oneOf: [
    // 这里匹配 `<style module>`
    {
      resourceQuery: /module/,
      use: [
        'vue-style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[local]_[hash:base64:5]'
          }
        }
      ]
    },
    // 这里匹配普通的 `<style>` 或 `<style scoped>`
    {
      use: [
        'vue-style-loader',
        'css-loader'
      ]
    }
  ]
}

• CSS Modules 可以与其它预处理器一起使用：

// webpack.config.js -> module.rules
{
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: { modules: true }
    },
    'sass-loader'
  ]
}

• 在 .vue 中你可以定义不止一个 <style>，为了避免被覆盖，你可以通过设置 module 属性来为它们定义注入后计算属性的名称。

<style module="a">
  /* 注入标识符 a */
</style>

<style module="b">
  /* 注入标识符 b */
</style>

二、scoped

模块化原理：

为类名添加一个hash标识属性。无法完全避开css权重和类名重复的问题。

<style scoped>
h1 {
 color: #f00;
}
</style>

//编译结果如下
h1[data-v-4c3b6c1c] {
 color: #f00;
}

缺点

• 如果用户在别处定义了相同的类名，也许还是会影响到组件的样式。

• 根据css样式优先级的特性，scoped这种处理会造成每个样式的权重加重,引用 使用了scoped的组件 作为子组件，修改子组件的样式变得很难，可能迫不得已只能用！important

• scoped会使 标签选择器 渲染变慢很多倍，用标签选择器时scoped会严重降低性能，而使用class或id则不会

三、总结

css module前期进行不麻烦的配置，实现的效果比scoped css更优，这里推荐使用css module。