- 1參考antd-design-mobile官方與create-react-app按需引用是有問題的。
- 2原因create-react-app 最新版并不支持這么配置。
- 3解決方法 在上述配置的基礎上
npm customize-cra react-app-rewired --save
這兩個是按需加載的
npm customize-cra react-app-rewired less less-loader --save
這兩個是自定義主題色用less
修改package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
//改成
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject",
"client": "serve build"
},
- 4然后在根目錄中新建config-overrides.js
//config-overrides.js
const {
override,
fixBabelImports,
addLessLoader,
} = require("customize-cra");
module.exports = override(
addLessLoader({
javascriptEnabled: true,
modifyVars: { "@brand-primary": "#1cae82", "@brand-primary-tap": "#1DA57A", "@hd": "1px"},
// strictMath: true,
// noIeCompat: true,
// localIdentName: '[local]--[hash:base64:5]'
}),
fixBabelImports("import", {
libraryName: "antd-mobile", libraryDirectory: "es", style: true // change importing css to less
})
)