1.打包后路径报错

在 package.json 中添加 homePage":"." 就行了

  1. {
  2.   "name": "my-app",
  3.   "version": "0.1.0",
  4.   "private": true,
  5.   "homepage": ".",
  6. }

2.图片引入问题

来源
来源2
来源3
在根目录下新建 images.d.ts 

  1. declare module "*.svg";
  2. declare module "*.png";
  3. declare module "*.jpg";
  4. declare module "*.jpeg";
  5. declare module "*.gif";
  6. declare module "*.bmp";
  7. declare module "*.tiff";

修改 ts.config.json 

  1.     "target": "es5",
  2.     "module": "esnext",

引入

  1. import img from "@/assets/images/404.png";

@别名配置 请参考 config-overrides.js 配置

3.ant样式报错

  • 问题描述 ```shell

./node_modules/antd/dist/antd.less (./node_modules/css-loader/dist/cjs.js??ref—6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref—6-oneOf-7-3!./node_modules/less-loader/dist/cjs.js??ref—6-oneOf-7-4!./node_modules/style-resources-loader/lib??ref—6-oneOf-7-5!./node_modules/antd/dist/antd.less)

.@{alert-prefix-cls} { .reset-component; ^ Unrecognized input. Possibly missing ‘(‘ in mixin call. Error in F:\Oliver\project\xuxhang\font-end-project-react\node_modules\antd\lib\alert\style\index.less (line 12, column 18)

  1. ![image.png](https://cdn.nlark.com/yuque/0/2020/png/368131/1609214780829-b9ada866-36e7-4303-a4b3-8a2e29d05edb.png#align=left&display=inline&height=326&margin=%5Bobject%20Object%5D&name=image.png&originHeight=651&originWidth=1489&size=121816&status=done&style=none&width=744.5)
  3. - 解决办法 [https://github.com/ant-design/ant-design/issues/23624](https://github.com/ant-design/ant-design/issues/23624)
  5. ![image.png](https://cdn.nlark.com/yuque/0/2020/png/368131/1609214771820-38f426e4-bb15-4bb8-96ba-99b70368e41d.png#align=left&display=inline&height=122&margin=%5Bobject%20Object%5D&name=image.png&originHeight=245&originWidth=643&size=21918&status=done&style=none&width=321.5)
  7. <a name="WekGL"></a>
  8. ## 4.多个className
  9. ```jsx
  10. <div className={`item ${isActive ? 'active' : ''}`}></div>