vue-cli 下的 CSS Modules

在 js 中使用

vue-cli 参考

在 Js 中作为 CSS Modules 导入 CSS 或其它预处理文件时，该文件应该以 .module.(css|less|sass|scss|styl) 结尾。

需要安装对应的预处理器和 loader。以 less 为例，需要安装 less 和 less-loader

举例

foo.module.less

@color: red;
.container {
  color: @color;
}
1
2
3
4

test.vue

<template>
  <div :class="lessStyles.wrap">下雪天的夏风div>
template>

<script>
import lessStyles from "./styles/foo.module.less";
export default {
  data() {
    return {
      lessStyles,
    };
  },
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意点：lessStyles 这个对象的 key 是定义的 class 类名，value 是自动生成的字符串。而元素最终添加的类名是 value。

渲染结果：

<div class="index_wrap_AglVD">下雪天的夏风div>
1

省略 .module

如果你想去掉文件名中的 .module，可以设置 vue.config.js 中进行设置

1，vue-cli@4.x 版本

// vue.config.js
module.exports = {
  css: {
    requireModuleExtension: false
  }
}
1
2
3
4
5
6

2，vue-cli@5.x 版本

来自这个 issue ，解决

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        modules: {
          auto: () => true
        }
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

在 vue 中使用

不过赘述，配置参考 官网详细文档 。

使用举例

<template>
  <p :class="$style.red">This should be redp>
template>

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12

---

以上。