antd 是基于 Ant Design 设计体系的 React UI 组件库，极大的提高开发效率，可按实际需要决定使不使用。
antd安装
命令行输入并执行：npm install antd --save
按照官网按需加载的方式
安装 babel-plugin-import，npm i babel-plugin-import --save
在 .babelrc文件下加入
// .babelrc or babel-loader option
{
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
style: true //加载 less 文件
}]
]
}
在page1页面中引入一个组件
import { DatePicker } from 'antd';
启动服务会发现有一段错误信息
image.png
解决方式：在webpack的配置中找到less的配置，在选项中添加javascriptEnabled: true
{ loader: "less-loader", options: { javascriptEnabled: true } }
再启动正常渲染组件即成功。
css-module
如需使用 css 模块化，可在webpack中less配置下加入：
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: {
mode: 'local',
localIdentName: '[local]--[hash:base64:5]',
},
}
},
然后就会存在一个问题，antd中的less也被模块化了，导致html找不到指定样式。
所以需要对于node_modules 文件夹内外样式分别处理
{
test: /\.less$/,
exclude:[/node_modules/],
use: [
{ loader: "style-loader" },
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: {
mode: 'local',
localIdentName: '[local]--[hash:base64:5]',
},
}
},
{
loader: "postcss-loader",//自动加前缀
options: {
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['last 10 version']
})
]
}
},
{ loader: "less-loader", options: { javascriptEnabled: true } }
]
},
{
test: /\.less$/,
include: [/node_modules/],
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{
loader: "postcss-loader",//自动加前缀
options: {
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['last 10 version']
})
]
}
},
{ loader: "less-loader", options: { javascriptEnabled: true } }
]
},
在page1中新增index.less
.page{
color: red;
}
在page1/index.js页面引入并使用样式
import React from "react";
import { DatePicker } from 'antd';
import styles from './index.less';
export default class Page1 extends React.Component {
render() {
return (
<div>
<div className={styles['page']}>这是页面一</div>
<div><DatePicker/></div>
</div>
)
}
}
启动服务，出现效果即配置成功
image.png
