目录
- [在 js 中使用](#在 js 中使用)
- 
- [省略 .module](#省略 .module)
 
- [在 vue 中使用](#在 vue 中使用)
在 js 中使用
在 Js 中作为 CSS Modules 导入 CSS 或其它预处理文件时,该文件应该以 .module.(css|less|sass|scss|styl) 结尾。
需要安装对应的预处理器和 loader。以
less为例,需要安装less和less-loader
举例
foo.module.less
            
            
              css
              
              
            
          
          @color: red;
.container {
  color: @color;
}test.vue
            
            
              html
              
              
            
          
          <template>
  <div :class="lessStyles.wrap">下雪天的夏风</div>
</template>
<script>
import lessStyles from "./styles/foo.module.less";
export default {
  data() {
    return {
      lessStyles,
    };
  },
};
</script>注意点:lessStyles 这个对象的 key 是定义的 class 类名,value 是自动生成的字符串。而元素最终添加的类名是 value。
渲染结果:
            
            
              html
              
              
            
          
          <div class="index_wrap_AglVD">下雪天的夏风</div>省略 .module
如果你想去掉文件名中的 .module,可以设置 vue.config.js 中进行设置
1,vue-cli@4.x 版本
            
            
              js
              
              
            
          
          // vue.config.js
module.exports = {
  css: {
    requireModuleExtension: false
  }
}2,vue-cli@5.x 版本
            
            
              js
              
              
            
          
          // vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        modules: {
          auto: () => true
        }
      }
    }
  }
}在 vue 中使用
不过赘述,配置参考 官网详细文档 。
使用举例
            
            
              html
              
              
            
          
          <template>
  <p :class="$style.red">This should be red</p>
</template>
<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>以上。