这篇文档主要针对如何在项目中使用和规划样式文件进行介绍,如果想获取基础的 CSS 知识或查阅属性,可以参考 MDN 文档。
umi 自带了 less,css 的解析工具,所以我们可以自由的使用两种中的任意一种。这里主要讲一下 less 的使用方式。Ant Design Pro 默认使用 less 作为样式语言,建议在使用前或者遇到疑问时学习一下 less 的相关特性。
index.less
index.ts
在这里我需要将 styles 引入,附加到 className 中。这样 umi 就知道应该编译这段 less。之所以需要 import styles from 'index.css';
是因为我们开启了 CSS Modules
来解决命名的问题。
less 作为 css 的超集,提供了很多 css 没有功能,其中最方便的就是变量。antd 中提供了丰富的变量来帮助我们进行开发。同时也让我的自定义主题变得更加简单,以下是 antd 提供的一些常用变量。所有样式变量可以在 这里 找到。
使用这些变量:
这样做可以让我们的项目与 antd 的同一性非常高,同时也避免了复写 css 样式带来额外工作量。同时也支持了在 config.ts
中修改主题,我们使用的变量会自动的被编译。