create-react-app@2.x 配置 less 与 antd

原创 守候你的季节 随笔 JavaScript 280阅读 2018-12-27 23:24:07 举报

create-react-app@1.x

在1.x版本中配置less见 1.x版本配置less

create-react-app@2.x

升级2.x的版本后,有两种配置less的方式

  1. react-app-rewired (一个对 create-react-app 进行自定义配置的社区解决方案)。 react-app-rewire-less 来帮助加载 less 样式
  2. 直接修改webpack配置文件

这里以第二种方式为例(第一种上面链接已经写的很详细了)
其实在2.x版本中默认内置了(scss/sass),这里仅作为配置示例

2.x 中将webpack.config.dev.js 与 webpack.config.prod.js进行了合并,只有一个webpack.config.js

配置less

弹出webpack配置文件

安装 less 以及 less-loader

在webpack中进行配置,与1.x相比较,2.x对css loader这一块做了提取,抽出了一个方法,如下

定义less文件匹配规则

在 App.js中导入less文件一切正常

配置antd组件库

安装并配置按需导入

在package.json中或者.babelrc中配置按需导入的组件库规则

目前为止在App.js中按需导入antd组件一切正常

注意:如果需要修改主题默认配置的话(例如颜色)导入less文件这里应设置为true

坑来了!!当你设为true时,你会发编译失败,页面中antd组件也会没有样式了,命令行抛出如下异常:
编译错误

这里主要还是落下了less-loader的配置

那么我要配置的主题颜色呢,别急见下文

到此配置完成,可以撸代码了

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复