使用样式预处理器

CSS本身采用的是一种比较古早的语法格式，当时的使用场景限制了语法的设计。后来随着前端页面功能越来越庞大、样式越来越复杂，直接写CSS是比较困难的，因此出现了许多CSS预处理器，比如主流的Less、Sass、Scss、Stylus、PostCSS、Tailwind等。UmiJS中推荐使用Less。

使用Less例子

UmiJS默认集成了Less的预处理器，不需要什么额外配置，我们直接使用就行了。

index.less

.siteCard {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}

index.jsx

import styles from './index.less';

export default function HomePage() {
  return (
    <div className={styles.siteCard}></div>
  );
}