vite构建的react+ts项目中使用less

下载less依赖

npm install less

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

css: {
    modules: {
      hashPrefix: 'prefix',
      generateScopedName: '[name]__[local]__[hash:base64:5]',
    },
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },

modules中hashPrefix设置生成CSS类名的哈希前缀（没生效），generateScopedName设置生成CSS类名的格式。preprocessorOptions中less中的javascriptEnabled表示在Less中启用JavaScript表达式，默认不启用。

创建less文件时需要注意文件名，需要以.module.less结尾，组件中引用代码如下。

import styles from './index.module.less'
<div className={styles.isDiv}>I am a div</div>

文件名需要.module.less结尾的原因：我们可以在vite依赖包下面的client.d.ts文件中看到以.module.less结尾的文件会定义导出类型CSSModuleClasses，不然我们导入的less样式无法使用styles.类名给标签加样式。