从零搭建react16开发环境（五）——antd

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 (
            

                
这是页面一
                

            
        )
    }
}

启动服务，出现效果即配置成功

image.png