目录
- 在 js 中使用
- 省略 .module
- 在 vue 中使用
在 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;
}
test.vue
<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
。
渲染结果:
<div class="index_wrap_AglVD">下雪天的夏风</div>
省略 .module
如果你想去掉文件名中的 .module
,可以设置 vue.config.js 中进行设置
1,vue-cli@4.x 版本
// vue.config.js
module.exports = {css: {requireModuleExtension: false}
}
2,vue-cli@5.x 版本
来自这个 issue ,解决
// vue.config.js
module.exports = {css: {loaderOptions: {css: {modules: {auto: () => true}}}}
}
在 vue 中使用
不过赘述,配置参考 官网详细文档 。
使用举例
<template><p :class="$style.red">This should be red</p>
</template><style module>
.red {color: red;
}
.bold {font-weight: bold;
}
</style>
以上。