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;
}
相关推荐
大猫会长几秒前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_几秒前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js
snakeshe10102 分钟前
深入理解useState:批量更新与非函数参数支持
前端
windliang3 分钟前
Cursor 排查 eslint 问题全过程记录
前端·cursor
boleixiongdi4 分钟前
# Bsin-App Uni:面向未来的跨端开发框架深度解析
前端
G等你下课7 分钟前
AJAX请求跨域问题
前端·javascript·http
前端西瓜哥7 分钟前
pixijs 的填充渲染错误,如何处理?
前端
snakeshe10108 分钟前
6-1. 实现 useState
前端
呆呆没有脑袋10 分钟前
深入浅出 JavaScript 闭包:从核心概念到框架实践
前端
snakeshe101011 分钟前
用100行代码实现React useState钩子:多状态管理揭秘
前端