ProComponent配置

proComponent组件默认是 *.ts后缀
支持 js项目，缺点：不能自动的引入样式，ts项目没有这个问题

install

yarn add @ant-design/pro-form @ant-design/pro-layout @ant-design/pro-list @ant-design/pro-descriptions @ant-design/pro-card @ant-design/pro-skeleton @ant-design/pro-table

如果项目使用 less会自动引入主题，解决下面的报错，会自动加载 css
需要自己手动的引入 proComponent 的样式
以 proCard组件为例，手动引入css文件 import '@ant-design/pro-card/dist/card.css'

import React from 'react';
import ProCard from '@ant-design/pro-card';
import '@ant-design/pro-card/dist/card.css';
import styles from './App.module.less';
function App() {
  return (
    <ProCard title="左右分栏带标题" extra="2019年9月28日" split="vertical" bordered headerBordered>
      <ProCard title="左侧详情" colSpan="300px">
        左侧内容
      </ProCard>
      <ProCard title="流量占用情况">
        <div style={{ height: 360 }}>右侧内容</div>
      </ProCard>
    </ProCard>
  );
}
export default App;

less报错

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
Inline JavaScript is not enabled. Is it set in your options?

解决：修改 config/webpack.config.js，找到 if (preProcessor) 新增 lessOption

if (preProcessor) {
  let lessOption = {}
  if(preProcessor === 'less-loader') {
    lessOption = {
      javascriptEnabled: true,
      modifyVars: {
        'primary-color': '#ff4757',
        'link-color': '#ff4757',
      }
    }
    loaders.push(
      {
        loader: require.resolve('resolve-url-loader'),
        options: {
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
          root: paths.appSrc,
        },
      },
      {
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: true,
          ...lessOption
        },
      }
    );
  }
  return loaders;
}