Composition API에서 CSS Modules를 사용하는 Vue3 새로운 기능

Vue 3 Composition API의 최근 베타 업그레이드에서 Vue 3 본 3 라이브러리 vue-next든 Vue 2 과도용 @vue/composition-api 라이브러리든 useCSSModule 함수를 동시에 업데이트했습니다. 이것은 Composition API를 사용한 Vue 실례에서 CSS Modules 문법을 지원하는 데 사용됩니다.
우선 CSS Modules가 무엇인지 살펴보겠습니다.
CSS Modules
CSS Modules는 CSS의 모듈화 및 조합 시스템입니다.vue-loader 통합 CSS Modules는 아날로그 scoped CSS의 대체 방안으로 사용할 수 있습니다.
CSS Modules 활성화
vuecli를 사용하여 만든 프로젝트라면 기본적으로 이 기능을 열었을 것입니다.프로젝트에서 수동으로 켜야 하는 경우 다음과 같이 설정합니다.

// 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'
 ]
}

그리고 구성 요소의