在这里css.modules我就不多介绍了,我们直接进行配置使用
首先在vite.config.js中进行配置
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path' //++
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {//++
alias: {//++
'@': resolve(__dirname, './src'),//++
'*': resolve('')//++
},//++
},//++
css: {
// 配置 css-module
modules: {
// 开启 camelCase 格式变量名转换
localsConvention: 'camelCase',
// 类名 前缀
generateScopedName: '[local]-[hash:base64:5]',
},
}
})
随后把,css后缀文件变成.modules.css文件之后在项目中引用
让我们看看打印结果
这个就把整个css文件变成了一个对象的形式,也就是不会再用那种冲突;
然后在项目里进行调用的时候就可就可以