在上篇文章使用Eject方式在 create-react-app 中使用 Ant Design of React中， 使用
create-react-app建立了React專案，並使用Eject方式暴露出了Webpack的配置，併成功按需引入了antd。本文主要內容：解決create-react-app建立專案後less不生效的問題；antd按需引入less原始檔，以及遇到的bezierEasing.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 }]
]
}
...
複製程式碼重啟之後，編譯錯誤，提示bezierEasing.less檔案的.bezierEasingMixin()方法報錯：
按照報錯提供的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使用本地字型 iconfont
2018年9月5日更新，9月開學季， ant design 系列迎來了一系列的重大更新。umi 迎來了 2.0 版本， 隨之而來的是 ant design pro 使用 umi 2.0 構建的 2.0 版本。 今天注意到 ant design 的 3.9.0 版本一個重大的更新是對 Icon 進行了重構， 使用 SVG 代替之前的 css font icon。所以如果使用 ant design 3.9.0 以上的版本， 就不會存在離線找不到字型檔案的問題了。如果你使用的 ant design 在 3.9.0 版本以下，可以參考下文離線使用 iconfont 的方式。
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
},
}
],
},
...
複製程式碼2018-08-02更新，評論區有兄弟留言說重新
npm install後，css module引入的樣式失效了，今天測試了一下確實有這個問題，試著改了上面的對less檔案處理的loader順序可以解決這個問題，但是原理不是很清楚，還請了解原理的兄弟幫忙指點，多謝
// webpack.config.dev.js
...
{
test: /.less$/,
include: [/src/],
use: [
require.resolve(`style-loader`),
{
loader: require.resolve(`css-loader`),
options: {
importLoaders: 1,
modules: true
},
}
],
},
{
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`"
}
}
}
],
},
...
複製程式碼總結
本文在eject的create-react-app的專案基礎上，按需引入了antd，遇到了有關less的若干問題：解決了less檔案不生效的問題，內網環境使用本地iconfont的配置方式，css module的配置方式。本文還有一些配置方式不是最優的方式，希望各位能夠給出更好的方案。
最近在起步React，準備記錄以下自己的學習和踩坑過程。下一篇文章應該是dva的使用。