- 安装插件
npm install antd -S
npm install @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import -D
- 根目录下创建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
}
}
}
}
]
}
- 修改package.json中的scripts
{
"scripts":{
"start": " craco start",
"build": "set GENERATE_SOURCEMAP=false && craco build",
"test": "craco test"
}
}
- 根目录下创建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"]
}
- 重启项目