1.新建
npx create-react-app react-ts --typescript
# or
yarn create react-app react-ts --typescript
之前都是运行npm run eject暴露所有webpack配置来添加less，研究了一下antd发现了一个新方法
2.antd
yarn add antd
在index.css顶部引入antd/dist/antd.css，一般都是把App文件都删了
@import '~antd/dist/antd.css';
3.自定义配置，按需加载antd组件样式
yarn add react-app-rewired customize-cra
修改package.json
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}
在根目录创建config-overrides.js用于修改默认配置
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
4.使用babel-plugin-import
按需加载组件代码和样式的babel插件
yarn add babel-plugin-import
修改config-overrides.js配置文件
const {override, fixBabelImports} = require('customize-cra');
module.exports = override(
fixBabelImports('import',{
libraryName:'antd',
libraryDirectory:'es',
styles:'css'
})
)
5.自定义主题（less)
yarn add less less-loader
修改config-overrides.js配置文件
const { override, fixBabelImports, addLessLoader } = require("customize-cra");
module.exports = override(
fixBabelImports("import", {
libraryName: "antd",
libraryDirectory: "es",
styles: "true"
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { "@primary-color": "#1DA57A" }
})
);
6.less模块化
没成功
在react-app-env.d.ts配置
declare module "*.module.less" {
const classes: { [key: string]: string };
export default classes;
}
报错
原因好像是webpack4版本里面的minimize去掉了。
没有eject不能改了
2019-12-5
