1.新建
npx create-react-app react-ts --typescript
# or
yarn create react-app react-ts --typescript
之前都是運行npm run eject暴露所有webpack配置來添加less，研究了一下antd發(fā)現(xiàn)了一個新方法
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",
}
在根目錄創(chuàng)建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
