Next.js腳手架進階 — 完美契合ant-design

luffyZh發表於2018-12-05
原文網址 : https://juejin.im/post/5be6fc006fb9a049a62c16a0
JS

前言

上次入門完了之後感覺意猶未盡，總覺得這個腳手架還是不太完美，還有可以改進的地方，所以為了與人方便也是與己方便，就繼續寫幾篇吧～?，不過既然之前的叫做入門系列，這個就叫做進階吧～

Next.js新手入門系列地址

Next.js腳手架進階系列

使用ant-design出現的一些問題

因為Next.js版本不斷的在更新，特別是升級到7之後，很多外掛都隨之配套升級了，因此如果你們用的是Next.js7以下的版本的話，升級須謹慎。因為官方說7速度快了很多，秉著踩坑我優先的原則，開始了我的升級之路，其中遇到問題最多的就算是與ant-design的契合問題了，主要問題出現在三個方面：

  • 各種plugins的升級

    // Next.js 6 version
"dependencies": {
  "@zeit/next-less": "^0.3.0",
  "babel-plugin-import": "^1.8.0",
  ...
},
"devDependencies": {
  "babel-plugin-transform-decorators-legacy": "^1.3.5",
  ...
}

// Next.js 7 version
"dependencies": {
  "@zeit/next-less": "^1.0.1",
  "babel-plugin-import": "^1.9.0",
  ...
},
"devDependencies": {
  "@babel/plugin-proposal-decorators": "^7.1.0",
  ...
}
複製程式碼

    首先就是next-less這個核心檔案需要升級，然後就是babel與antd的外掛進行了切換。具體可以在程式碼裡看。

  • 目錄結構變化導致靜態CSS檔案引入路徑問題

    首先，以前一直用的是Next.js 6, 所有的css檔案會被打包成style.css存放路徑是/.next/static/style.css。而Next.js 7以後，應該是webpack優化了CSS編譯，編譯過後資料夾結構如下：

Next.js腳手架進階 — 完美契合ant-design
可以看到不僅結構發生了變化，名稱也發生了變化，應該是內建webpack進行了css方面的優化吧。 總之現在這樣，再使用v6版本的程式碼，我們瀏覽器就會報一個錯，如下圖所示：
Next.js腳手架進階 — 完美契合ant-design

解決辦法：移除_app.js的Head頭部的link標籤，改成在_app.js頂部import樣式檔案進來import '../asserts/styles.less';

Next.js腳手架進階 — 完美契合ant-design

  • 打包後ant-design的custom檔案被覆蓋的問題

    最後，最頭疼的問題，上面都改完了之後，你在開發環境跑起來會發現，OK，升級成功，不過你試試打包一下，打包過後你的custom-css樣式就會被ant-design原本樣式所覆蓋，也就是你的custom-css檔案不生效了。

【解決辦法】：

  1. 如果你接受不改ant-design的樣式，就用它本身框架帶的屬性就行，那完全OK，什麼都不用做了。
  2. 自己clone下來ant-design的包進行更改。以前的文章正好有人給我留言這塊。

Next.js腳手架進階 — 完美契合ant-design

  1. 以前的我懵懂無知，可能第二種是最好的解決辦法，但是直到我發現了下面最完美的解決辦法。
// next.config.js
...
// Where your antd-custom.less file lives
  const themeVariables = lessToJS(
    fs.readFileSync(
      path.resolve(__dirname, './asserts/antd-custom.less'),
      'utf8',
    ),
  );
...
withLess({
    lessLoaderOptions: {
      javascriptEnabled: true,
      modifyVars: themeVariables, // 新增modifyVars屬性
      localIdentName: '[local]___[hash:base64:5]',
    },
  ...
})
複製程式碼

上面第三種也是我現在在用的，目前沒發現什麼問題，大家可以放心使用～

另外官方Demo我也幫助簡單的更新了一下，現在create-next-app的 with-ant-design-less的Demo用的就是我pr的這一版。

Next.js腳手架進階 — 完美契合ant-design

總結

又水了一篇，這個系列我就想從踩坑入門的那個腳手架一步一步的進行完善，讓大家使用起來越來越方便，增加可擴充套件性吧。所以每一篇文章都只針對一個活著兩個點，不長篇大論了就。

腳手架地址：Next-Antd-Scaffold

有意見可以留言， 喜歡的給個Star，萬分感謝～

QQ群：641113448 （備註：Next.js）

相關文章