1.开启项目 并且执行 yarn eject
下载好我们需要的插件(babel-plugin-import less less-loader antd react-loadable .....)
如果需要设置项目启动端口号 可以在项目文件下 新建.env 文件 在文件里写下:
port = 8889
https = false
2. 打开package.json, 在 babel 里面加上:
"plugins": [["import", { "libraryName": "antd", "style": true }]] //使用antd 允许less
3.在 webpack.config.dev.js , webpack.config.prod.js 中找到 cssRegex 这个变量 修改为:
const cssRegex = /\.(css|less)$/; //包括less文件
4.在 cssRegex 变量的下边 找到 getStyleLoaders 函数 给函数的 loaders 数组增加一个元素 让其调用less-loader解析less
{loader:require.resolve('less-loader'),options:{javascriptEnabled: true //允许通过js调用antd组件}}
'@': paths.appSrc, //通过 @ 定位到src paths 对象里有每个文件的地址引用 可修改
如果你不需要每次启动之后浏览器都打开新页面 那么
找到scripts 文件下 start.js 中的 openBrowser 属性 注释掉下方的调用语句
如果你没有yarn eject 暴露配置 那么你可能需要 react-app-rewired 插件 来覆盖项目原有的配置 可见 高级配置