css modules基本使用

使用css Modules(dom上类名被渲染成哈希字符尽量减少类名冲突) 代替 scoped 解决vue样式污染

配置参考：

https://blog.csdn.net/weixin_44869002/article/details/105831661

https://cli.vuejs.org/zh/config/#css-loaderoptions

https://blog.csdn.net/weixin_44869002/article/details/106826503

// vue.config.js配置
// css相关配置
  css: {
    extract: false, // 是否使用css分离插件 ExtractTextPlugin
    sourceMap: true, // 开启 CSS source maps?
    requireModuleExtension: true, // 是否仅对文件名包含module的css相关文件使用 CSS Modules
    loaderOptions: {
      css: {
        modules: {
          localIdentName: '[local]_[hash:base64:8]' // 设定 CSS Modules 命名规则
        }
      }
    } // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
  },

使用规则:

参考1

参考2

<h1 :class="$style.col">测试1</h1>
<h1 :class="$style["abc-col"]">测试2</h1>
<h1 :class="$style.text_One">测试3</h1>

// 使用 CSS Modules、这样配置dom结构的样式会被生成哈希字符避免重复
<style module>
    .col { color: red }
	.abc-col { color: black }
	.text_One{ color: pink }
</style>

:local() 局部作用域

**:global() 全局作用域 ** 修饰的样式是不会被重命名的、不会被渲染哈希字符类名、并且不需要进行类名绑定、直接赋值class就行

<h1 :class="$style.color">使用:local 声明的样式</h1>
<h2 class="g_color">使用:global 声明的样式</h2>
<h3 :class="[$style.a, $style.b]">多个类名</h3>

<style module>
/* 使用 CSS Modules */
:local(.color) {
  color: #42b983;
}
:global(.g_color){
  color: #14d5ee;
}
.a { color: green }
.b { font-size: 15px; }
</style>