create-react-app 初始化 AntD 项目
基础插件安装，Less 文件加载配置
安装所需的插件：
- 安装 React-Router、Axios
- 安装 AntD
- 暴露 Webpack 配置
- 安装 less-loader（AntD 使用 less 开发）
- 修改 less-loader
npm install -g yarn（用npm全局安装yarn）
yarn --version（1.19.1）
yarn global add create-react-app@1.5.2（用yarn全局安装create-react-app）
create-react-app imoocmanager（初始化项目）
cd imoocmanager
yarn remove react react-dom react-scripts
yarn add react@16.3.2 react-dom@16.3.2 react-scripts@1.1.4
yarn add react-router-dom@4.2.2（安装新的 react-router）
yarn add axios@0.18.0 less-loader@4.1.0
此时 package.json：
{
"name": "imoocmanager",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "0.18.0",
"less-loader": "4.1.0",
"react": "16.3.2",
"react-dom": "16.3.2",
"react-router-dom": "4.2.2",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
暴露隐藏的配置（不可逆过程）：
yarn run eject
这是 Webpack 原本对CSS的处理：
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
在 webpack.config.dev.js module.rules 中对 css 处理的后边添加对 less 的配置：
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('less-loader'),
options: {
}
}
],
},
安装 babel-loader：
yarn add babel-loader@7.1.2
将 App.js 中引入 css 改为引入 less：
import './App.css'; -> import './App.less';
yarn start 启动项目报错，提示没有模块 less，则需要安装 less，安装后重启即正常：
yarn add less@2.7.3
安装 antd：
yarn add antd@3.4.3 babel-plugin-import@1.7.0（antd 文档推荐使用，可以按需加载组件代码和样式）
antd 文档使用的是不暴露 Webpack 配置的方式设置按需加载，这里暴露了配置需要进行不同的配置，修改webpack.config.dev.js 中 module.rules 的部分：
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},
改为：
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
plugins:[
["import",[{
libraryName:"antd",
style:true, // babel-loader 将 antd 导入到 style 中
}]],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},
App.js 中引入 antd 中的蓝色按钮 Button：
import React from 'react';
import logo from './logo.svg';
import './App.less';
import {Button} from 'antd'; // ----------------------------------
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<Button type="primary">Primary</Button>{/* ---------------------------------- */}
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
修改 antd 主题：
暴露 Webpack 配置后，参考 antd 文档 https://ant.design/docs/react/customize-theme-cn 修改主题
webpack.config.dev.js less-loader 中添加配置：
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('less-loader'),
options: {
// 添加------------------------------------
modules:false,
modifyVars:{
"@primary-color":"#f9c700",
},
// ------------------------------------
}
}
],
},
重启项目后，之前的蓝色按钮变为黄色