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;
}
相关推荐
岁月向前1 小时前
小组件获取主App数据的几种方案
前端
用户47949283569151 小时前
TypeScript 和 JavaScript 的 'use strict' 有啥不同
前端·javascript·typescript
恒创科技HK1 小时前
香港服务器速度快慢受何影响?
运维·服务器·前端
bubiyoushang8882 小时前
MATLAB实现直流电法和大地电磁法的一维正演计算
前端·javascript·matlab
Mintopia2 小时前
🧠 AIGC模型的增量训练技术:Web应用如何低成本迭代能力?
前端·javascript·aigc
Mintopia2 小时前
🧩 Next.js在国内环境的登录机制设计:科学、务实、又带点“国风味”的安全艺术
前端·javascript·全栈
qq. 28040339842 小时前
react hooks
前端·javascript·react.js
LHX sir3 小时前
什么是UIOTOS?
前端·前端框架·编辑器·团队开发·个人开发·web
Gazer_S3 小时前
【前端状态管理技术解析:Redux 与 Vue 生态对比】
前端·javascript·vue.js
小光学长3 小时前
基于Vue的图书馆座位预约系统6emrqhc8(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js