vue3 Style Module实战

scoped

在vue中，因为组件化的缘故，我们需要使用到样式隔离来避免样式的污染和冲突。目前使用比较多的还是在style上添加scoped属性。该方式是通过给同一组件下的元素添加相同的自定义属性hash值才实现样式的私有化

<div class="cutom_box" data-v-5hc9jk3pw>
  <p data-v-7eb2bc79>Hello World!</p>
</div>

.cutom_box[data-v-5hc9jk3pw] {
  width: 100%;
}
.cutom_box p[data-v-5hc9jk3pw] {
  color: #333;
  font-size: 12px;
}

CSS Module

除了scoped之外，我们还可以使用css module的方式，通过在style标签上添加module属性来实现样式的私有化。
该方式是直接将代码编译为CSS Modules

/* 案例来自阮一峰老师的博文《CSS Modules 用法教程》 */
/* https://www.ruanyifeng.com/blog/2016/06/css_modules.html */

/* 编译前 */
.title {
  color: red;
}

/* 编译后 */
._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

<template>
  <p :class="$style.customColor">Hello World!</p>
</template>

<style module>
.customColor {
  color: #ff0000;
}
</style>

注意：

1. 单纯使用<style module>的时候，默认绑定到 style.customColor来引用，如果CSS类名是custom-color这样的，则需要通过 $style['custom-color'] 来引用。
2. 也可以给style module添加一个命名，这样就可以通过 变量名来操作

/* 命名的CSS Module */
<template>
  <p :class="customModule.customColor">Hello World!</p>
</template>

<style module="customModule">
.customColor {
  color: #ff0000;
}
</style>

useCssModule

vue3提供的Composition API - useCssModule，用来在setup函数或者<script setup></script>标签内访问CSS Module。(只可以在setup内使用)

<template>
  <p :class="$style.customColor"></p>
</template>

<script setup lang="ts">
import {  useCssModule } from 'vue'
const styleModule = useCssModule()
console.log('> styleModule:', styleModule)
</script>

<style module>
.customColor {
  color: #ff0000;
}
</style>

<template>
  <p :class="customModule.customColor"></p>
</template>

<script setup lang="ts">
import {  useCssModule } from 'vue'
//如果是命名过的CSS Module，则需要传入具体的module名称才能获取到
const styleModule = useCssModule('customModule')
console.log('> styleModule:', styleModule)
</script>

<style module="customModule">
.customColor {
  color: #ff0000;
}
</style>

使用CSS Module可以更精确的隔离组件的样式，避免样式污染。但大部分情况通过scoped基本可以实现样式隔离，所以根据项目需求实际情况来选择
参考：阮一峰老师的CSS Module