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

qq_32496215

于 2022-08-12 15:00:06 发布

阅读量353

点赞数

分类专栏： react ant design 文章标签： react

本文链接：https://blog.csdn.net/qq_32496215/article/details/126304409

版权

react 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

ant design

1 篇文章 0 订阅

订阅专栏

安装插件

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"
  }
}

{
  "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"]
}