使用 less

上次修改时间：2021-05-07 15:43:50

这篇文档主要针对如何在项目中使用和规划样式文件进行介绍，如果想获取基础的 CSS 知识或查阅属性，可以参考 MDN 文档。

umi 自带了 less，css 的解析工具，所以我们可以自由的使用量两种中的任意一种。这里主要讲一下 less 的使用方式。Ant Design Pro 默认使用 less 作为样式语言，建议在使用前或者遇到疑问时学习一下 less 的相关特性。

`index.less`

.page {
  height: 100vh;
}

`index.ts`

import styles from 'index.less'; // 告诉 umi 编译这个 less

const Page = () => {
  // 附加样式到 className 中
  return <div className={styles.page}>this is a page</div>;
};

在这里我需要将 styles 引入，附加到 className 中。这样 umi 就知道应该编译这段 less。之所以需要 import styles from 'index.css'; 是因为我们开启了 CSS Modules 来解决命名的问题。

使用变量

less 作为 css 的超集，提供了很多 css 没有功能，其中最方便的就是变量。antd 中提供了丰富的变量来帮助我们进行开发。同时也让我的自定义主题变得更加简单，以下是 antd 提供的一些常用变量。所有样式变量可以在这里找到。

@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 2px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
  0 9px 28px 8px rgba(0, 0, 0, 0.05); // 浮层阴影

使用这些变量：

index.less

@import '~antd/es/style/themes/default.less';

.page {
  height: 100vh;
}

.myLink {
  color: @primary-color;
  font-size: @font-size-base;
}

index.ts

import styles from 'index.less'; // 告诉 umi 编译这个 less

const Page = () => {
  // 附加样式到 className 中
  return (
    <div className={styles.page}>
      <text className={styles.myLink}>this is a page</text>
    </div>
  );
};

这样做可以让我们的项目与 antd 的同一性非常高，同时也避免了复写 css 样式带来额外工作量。同时也支持了在 config.ts 中修改主题，我们使用的变量会自动的被编译。