在上篇文章使用Eject方式在 create-react-app 中使用 Ant Design of React中, 使用create-react-app创建了react项目,并使用eject方式暴露出了webpack的配置,并成功按需引入了antd。本文主要解决create-react-app创建项目后,less不生效、antd按需引入less文件、antd本地字体的配置方法、以及less使用css module的配置
直接引入less样式不生效
创建test.less
,并在App.js
中引入
.test {
color: red;
}
复制代码
// App.js
...
import './test.less'
...
<div className="test">test</div>
<Button type="primary">Button</Button>
...
复制代码
发现test的颜色并没有生效
安装 less 和 less-loader ,并修改webpack配置
$ cnpm i less less-loader --save-dev
复制代码
修改webpack配置 修改 webpack.config.dev.js
和 webpack.config-prod.js
配置文件, 增加less文件配置:
// webpack.config.dev.js
...
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('less-loader') // compiles Less to CSS
}
],
},
...
复制代码
重启项目后,less样式已经生效
antd 样式使用 less 形式引入
在babel-plugin-import 中对style有这样对说明:
["import", { "libraryName": "antd" }]
: import js modularly
["import", { "libraryName": "antd", "style": true }]
: import js and css modularly (LESS/Sass source files)
["import", { "libraryName": "antd", "style": "css" }]
: import js and css modularly (css built files)
修改package.json,将style
的值改为true
...
"babel": {
"presets": [
"react-app"
]
],
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
]
}
...
复制代码
重启之后,编译错误
按照报错提供的issue地址查看 : github.com/ant-design/… 主要有2种解决方式
- 将 less 版本降到 3.0 以下, 应该可行,没有测试
- less loader 增加配置,开启 JavaScript :
// webpack.config.dev.js
...
{
- loader: require.resolve('less-loader') // compiles Less to CSS
+ loader: require.resolve('less-loader'), // compiles Less to CSS
+ options: {
+ javascriptEnabled: true
+ }
}
复制代码
重新npm start
,项目可以正常启动。
antd使用本地字体
Ant Design 默认的 iconfont 文件托管在 iconfont.cn 并默认使用平台提供的 alicdn 地址,公网可访问使用。
由于 alicdn 对部分域名有访问限制,或者需要内网环境使用,需要将字体下载到本地
最新的 iconfont 文件可以到 此链接 下载。
下载后将字体文件放入 public/iconfont/
路径下
由于项目使用的是create-react-app创建项目,且antd的样式使用babel-plugin-import
按需加载样式,所以只能采用 定制主题中的less-loader
的modifyVars
配置来覆盖原来的样式变量。
具体改动 修改 webpack.config.dev.js
和 webpack.config-prod.js
配置文件
// webpack.config.dev.js
...
{
loader: require.resolve('less-loader'), // compiles Less to CSS
options: {
javascriptEnabled: true,
modifyVars: {
"icon-url": "'/public/iconfont/iconfont'"
}
}
}
复制代码
重启项目,成功引入了本地字体
需要注意的是webpack.config-prod.js
文件中的icon-url
路径需要将public
替换为生产环境项目文件路径,打包之后public
中的文件和文件夹直接复制到bulid
路径下。使用相对路径会报错无法编译,这点不知道有没有更好的处理方式,希望读者大神们提供更好的方式。
// webpack.config-prod.js
...
{
loader: require.resolve('less-loader'), // compiles Less to CSS
options: {
javascriptEnabled: true,
modifyVars: {
"icon-url": "'/your-project-name/iconfont/iconfont'"
}
}
}
复制代码
css module 形式引入less
增加css-loader
的配置
{
test: /\.less$/,
// exclude: [/node_modules/],
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
+ modules: true
},
},
{
loader: require.resolve('less-loader'), // compiles Less to CSS
options: {
javascriptEnabled: true,
modifyVars: {
"icon-url": "'/public/iconfont/iconfont'"
}
}
}
],
},
复制代码
修改App.js
,使用css module方式引入
- import './test.less'
+ import styles from './test.less'
class App extends Component {
render() {
return (
<div className="App">
- <div className="test">test</div>
+ <div className={styles.test}>test</div>
<Button type="primary">Button</Button>
</div>
);
}
}
复制代码
重启项目,css module引入的test样式生效了,但是antd的按钮样式失效了
需要修改 webpack.config.dev.js
,只对src
中的less
文件开启css module
,这里写法有点麻烦,应该有更好的方式。
// webpack.config.dev.js
...
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1
},
},
{
loader: require.resolve('less-loader'), // compiles Less to CSS
options: {
javascriptEnabled: true,
modifyVars: {
"icon-url": "'/public/iconfont/iconfont'"
}
}
}
],
},
{
test: /\.less$/,
include: [/src/],
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true
},
}
],
},
...
复制代码
总结
本文在eject
的create-react-app
的项目基础上,按需引入了antd
,遇到了有关less
的若干问题:解决了less
文件不生效的问题,内网环境使用本地iconfont
的配置方式,css module
的配置方式。本文还有一些配置方式不是最优的方式,希望各位能够给出更好的方案。
最近在起步React
,准备记录以下自己的学习和踩坑过程。下一篇文章应该是dva
的使用。