Vue3新特性之在Composition API中使用CSS Modules

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

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

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

<template>
 <div>
  <p :class="$style.red">
   hello red!
  </p>
 </div>
</template>

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

<script>
export default {
 created () {
  console.log(this.$style.red)
 }
}
</script>

<template>
 <span :class="$style.span1">hello 111 - {{ text }}</span>
</template>

<script>
export default {
 props: {
  text: {
   type: String,
   default: ''
  }
 }
};
</script>

<style lang="scss" module>
.span1 {
 color: red;
 font-size: 50px;
}
</style>

<script>
export default {
 props: {
  text: {
   type: String,
   default: ''
  }
 },
 render(h) {
  return <span class={this.$style.span1}>hello 222 - {this.text}</span>;
 }
};
</script>

<style lang="scss" module>
.span1 {
 color: blue;
 font-size: 40px;
}
</style>

<template>
 <span :class="$style.span1">hello 333 - {{ text }}</span>
</template>

<script>
import { useCSSModule } from '@vue/composition-api';

export default {
 props: {
  text: {
   type: String,
   default: ''
  }
 },
 setup(props, context) {
  const $style = useCSSModule();
  return {
   $style
  };
 }
};
</script>

<style lang="scss" module>
.span1 {
 color: green;
 font-size: 30px;
}
</style>

export const useCSSModule = (name = '$style'): Record<string, string> => {
 const instance = getCurrentInstance()
 if (!instance) {
  __DEV__ && warn(`useCSSModule must be called inside setup()`)
  return EMPTY_OBJ
 }

 const mod = (instance as any)[name]
 if (!mod) {
  __DEV__ &&
   warn(`Current instance does not have CSS module named "${name}".`)
  return EMPTY_OBJ
 }

 return mod as Record<string, string>
}

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

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