在上篇文章使用 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 形式引入
在 https://github.com/ant-design/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 地址查看 : https://github.com/ant-design/ant-motion/issues/44 主要有 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 文件可以到 此链接 https://ant.design/docs/spec/download-cn 下载.
下载后将字体文件放入 public/iconfont/ 路径下
由于项目使用的是 create-react-app 创建项目, 且 antd 的样式使用
babel-plugin-import
按需加载样式, 所以只能采用 定制主题 https://ant.design/docs/react/customize-theme-cn 中的 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 的使用.
来源: https://juejin.im/post/5b5ddc9a5188251aa14c11be