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

一、css module

模块化原理

为所有类名重新生成类名，有效避开了css权重和类名重复的问题。css module直接替换了类名，排除了用户设置类名影响组件样式的可能性。

//编译结果
Im gray
.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]'
            }
          }
        ]
      }
    ]
  }

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

  特殊情况

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

  {
    test: /\.css$/,
    oneOf: [
      // 这里匹配 `
  
  
  

  二、scoped

  模块化原理：

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

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

  缺点

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

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

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

  三、总结

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