React vite + less

组件很多之间可能有类名相同,导致样式冲突,因此制定导出规则,给类名加上hash值。在vite.config.ts配置中添加以下规则。

javascript 复制代码
css: {
    modules: {
      hashPrefix: 'prefix',
      generateScopedName: '[name]__[local]__[hash:base64:5]',
    },
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
javascript 复制代码
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;
}
相关推荐
excel1 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel2 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼4 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping4 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙5 小时前
[译] Composition in CSS
前端·css
白水清风5 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix5 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278005 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端5 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧5 小时前
Promise 的使用
前端·javascript