折腾了半天，发现根本不用安装什么 stylus、stylus、style-loader、css-loader 什么东东一大堆！！！
直接创建 css 文件然后引入就可以了，需要配置的话可以在 css.loaderOptions 配置，默认不配置就可以，真的我哭死！！！文章来源：https://www.toymoban.com/news/detail-778363.html
1. 新建文件 img.custom-module.css
/* img.custom-module.css */
.img-w200 {
width: 200px;
height: 200px;
}
:local(.img-full) {
width: 100%;
height: auto;
}2. 在 vue 文件中 可以 import 引入
// IndexPage.vue
<script setup>
import styles from './img.custom-module.css'
import { onMounted } from 'vue'
onMounted(() => {
const ele = document.getElementsByTagName('img')
ele[0].className = styles['img-w200']
})
</script>
<template>
<img src="@/assets/m.jpg" />
</template>这时，运行之后就可以看到 img 标签已经动态添加了类名文章来源地址https://www.toymoban.com/news/detail-778363.html
3. 配置 css.loaderOptions
// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
css: {
loaderOptions: {
css: {
modules: {
// custom-module 就是 css 文件名的中间的值
auto: /\.custom-module\.\w+$/i,
localIdentName: process.env.NODE_ENV === 'local' ? '[local]': '[hash:base64]'
}
}
}
}
})到了这里，关于vue-cli 5 如何配置 CSS Modules的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
