react+antd引入并修改样式，配置别名路径

1. 安装插件

npm install antd -S
npm install @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import -D
1
2

2. 根目录下创建craco.config.js文件

const CracoLessPlugin = require('craco-less')
const path = require('path')

const pathResolve = pathUrl => path.join(__dirname, pathUrl);

module.exports = {
    webpack: {
      alias: {
        '@': pathResolve('src')
      }
    },
    babel: {
      plugins: [
        ['import', { libraryName: 'antd', style: true }],
        ['@babel/plugin-proposal-decorators', { legacy: true }]
      ]
    },
    plugins: [
      {
        plugin: CracoLessPlugin,
        options: {
          // 此处根据 less-loader 版本的不同会有不同的配置，详见 less-loader 官方文档
          lessLoaderOptions: {
            lessOptions: {
              modifyVars: {'primary-color':'#fcc900'},//修改样式
              javascriptEnabled: true
            }
          }
        }
      }
    ]
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

3. 修改package.json中的scripts

{
  "scripts":{
    "start": " craco start",
    "build": "set GENERATE_SOURCEMAP=false && craco build",
    "test": "craco test"
  }
}
1
2
3
4
5
6
7

4. 根目录下创建jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@@/*": ["./*"],
      "@/*": ["src/*"],
      "@assets/*": ["src/assets/*"],
      "@common/*": ["src/common/*"],
      "@components/*": ["src/components/*"],
      "@hooks/*": ["src/hooks/*"],
      "@pages/*": ["src/pages/*"],
      "@store/*": ["src/store/*"],
      "@utils/*": ["src/utils/*"]
    },
    "experimentalDecorators": true
  },
  "exclude": ["node_modules", "build"]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

5. 重启项目