- 安装
create-react-app - 执行下面命令
npm init react-app my-app
cd my-app
npm run eject
3.配置按需加载antd
- 下载按需加载插件
npm i babel-plugin-import --save
- 配置
package.json或者.babelc.注意只能配置一个，这里以package.json举例
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "lib",
"style":"css"
}
]
]
}
到这里就可以按需引入antd组件了
import {Button} from 'antd'
- 配置less加载
- 下载less文件及less加载器
npm i less less-loader --save
- 配置webpack文件，路径在
config/webpack.config.js
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
修改为
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
再复制sass-loader的配置替换为less-loader的配置复制在oneOf下
oneOf:[
...,
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment
},
'less-loader'
),
sideEffects: true
}, {
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: true,
getLocalIdent: getCSSModuleLocalIdent
},
'less-loader'
)
},
]
到这里就可以愉快在项目中写less文件了。
- 配置
antd主题
因为antd使用的样式用less编写，所以
- 修改
babel配置
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "lib",
"style": true
}
]
]
}
-在config/webpack.config.js的getStyleLoaders方法里的if (preProcessor)判断下修改
if (preProcessor) {
let loader = {
loader: require.resolve(preProcessor),
options: {
sourceMap: shouldUseSourceMap
}
};
if (preProcessor === 'less-loader') {
loader.options.modifyVars = {
'primary-color': '#25b864',
'link-color': '#1DA57A',
'border-radius-base': '2px'
};
loader.options.javascriptEnabled = true;
}
loaders.push(loader);
}
return loaders;
重新启动项目，看到默认颜色变绿表示修改成功了
6.打包资源路径
在package.json配置homepage属性，如
"homepage": "./"
