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;
}
相关推荐
阿芯爱编程4 小时前
2025前端面试题
前端·面试
前端小趴菜055 小时前
React - createPortal
前端·vue.js·react.js
晓13135 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo5 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴6 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7897 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼7 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原8 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf8 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js
爱编程的喵8 小时前
React Router Dom 初步:从传统路由到现代前端导航
前端·react.js