[Share] 如何像 Ant Design Pro 一样使用 less 重写样式

Antd.md

使用 parceljs + postcss

最近开了一个新项目，准备使用 Ant Design 作为前端UI框架。 时间紧，任务重，所以想找个最佳实践直接开始，Ant Design Pro 是首选。 但是有一个问题，Ant Design Pro 是一个基于 dva 的最佳实践，而我们项目不想引入 redux，烦。

然后我按照 Ant Design 的教程搭建了一个简单的项目，实现了CURD，实现了拖拽，实现了动画效果。一切看似很顺利。 但是，当我想要自定义样式时，出现了问题。我写的 less 无法反映到 JS 文件中。😭

期待的结果：

import less 文件，像 js 对象一样使用样式。

import styles from './example.less';
export default ({ title }) => <div className={styles.title}>{title}</div>;

// example.less
.title {
  font-weight: 600;
  margin-bottom: 16px;
}

我的尝试：

1.create-react-app + react-app-rewire-less 先尝试 ant design 官方文档。 按照文档，ant design 的样式正确渲染了。可是我自己写的 test.less 没有正确加载。

import style from './test.less'  // style = {}

还有一点，react-app-rewire-less 0⃣️👍。

迫于是公司项目，不敢用啊。😂

2.umi umi 是一个新的库，我是从云谦的blog 中知道了。虽然还在开发中，但是我还是迫不及待地尝试了一下。

但是，按照教程做 Demo 时就出现不能理解的想象了。 pages 文件夹下定义 test.js，/test 路由正确匹配，/test/ 路由匹配失败

迫于是公司项目，umi 只能转为保持关注。😊

3.parcel + postcss 添加配置文件 .postcssrc

{
  "modules": true
}

成功了，开心。