create-react-app 项目中使用Antd(按需加载 以及 less 配置)
大概很多一部分人在使用create-react-app 构建好的React 项目运行环境,在选择Antd 最为React组件的UI 库时,有必要对其按需加载的配置。本来对与UI 的配置来说一般不复杂,但是在这里需要一些注意的配置项,打算还会写了这么一篇文章作为记载,希望能帮助到关于此配置问题的伙计 Men.
索引:
1、create-react-app 中使用Antd 按需加载配置.
2、create-react-app 使用 Less 相关配置
1、create-react-app 中使用Antd 按需加载配置
通过Antd 官网的介绍,按需加载的方式可以有两中行为:
第一种方法是使用 babel-plugin-import 。这是推荐使用,但是这通常需要我们弹出Webpack 配置才行,参考这一篇文章查看所有弹出的文件信息=> npm run eject 。
第二种方法是使用 react-app-rewired,这在create-react-app 中我们无需弹出webpack 配置。
在更多的实际应用中,为了更加灵活的管理以及配置 webpack ,一般情况会弹出配置文件的处理。如下描述使用 babel-plugin-import 按需加载配置,非常简单,只需配置.babel 文件即可:
// 1、安装 babel-plugin-import
npm i babel-plugin-import --save-dev
// 2、.babelrc
{
"presets": [
"react-app"
],
"plugins": [
["import",{
"libraryName":"antd-mobile",
"style": "css" // `style: true` 会加载 less 文件
}
]
]
}
// 3、最后我们就可以按需加载Antd 组件了. 需要什么导入什么。无需单独引入样式
import {
Icon,
Button
}
from 'antd-mobile'
2、create-react-app 使用 less 相关配置
在create-react-app 项目中使用less 做为css 预处理的手机是很好的方式。 Antd 本身的UI 组件也有使用 less 做为编写组件样式的行为。
但是我们在项目安装配置 less 过程中可能会出现一些问题 以及 报错信息。如下说明我们在 create-react-app 如何安装并配置 less
1、首先需要安装 less 依赖,这需要有两个依赖项:
npm i less --save-dev
npm i less-loader --save-dev
2、修改Antd 组件按需加载时 样式编译的手段:
// .babelrc
"plugins": [
["import",{
"libraryName":"antd-mobile",
"style": true // 这里改为true, 它将加载 并 处理我们的 less
}
]
]
3、修改webpack 配置,这是重要的部分。我们需要为这两个文件都进行添加配置,开发环境(dev.js) 和 生产环境(prod.js):
// module rules .
// 1、修改 test: /\.css$/ 配置对象为:
{
test: /\.(css|less)$/,
...
}
// module rules .
// 2、在 test: /\.(css|less)$/, 配置对象最后中添加 对象loader 以及 options 配置:
{
test: /\.(css|less)$/,
...
{
loader: require.resolve('less-loader'), // compiles Less to CSS
options:{
javascriptEnabled:true
}
}
}
// module rules .
// 修改 exclude 配置对象为如下:
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.(css|less)$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
...
}
如上针对 less 相关配置就完成了,然后就重新启动我们的服务,就可以使用 less 作为组件样式编写的手段。
如果还有其他问题您可以在下面评论关于遇到的信息,或者您也可以加入进来,这里不讨论如何解决程序猿单身大军的矛盾,关于任何有兴趣的 以及 需要着手解决的问题都可以提出来。欢迎加入:Q群:595377655