React vite + less
组件很多之间可能有类名相同，导致样式冲突，因此制定导出规则，给类名加上hash值。在vite.config.ts配置中添加以下规则。
css: {
modules: {
hashPrefix: 'prefix',
generateScopedName: '[name]__[local]__[hash:base64:5]',
},
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},import styles from "./App.module.less";
function App() {
return (
<>
<span>Randomly generated letters2</span>
<div className={styles.container}>
<div className={styles.title}>title2</div>
<div className={styles.title2}>title22</div>
</div>
<div className={styles.title}>title2</div>
</>
);
}
export default App;
//less
.container {
background-color: pink;
.title {
color: red;
}
.title2 {
color: royalblue;
}
}
.title {
padding: 20px;
}