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

前言

上次入門完了以後感受意猶未盡，總以爲這個腳手架仍是不太完美，還有能夠改進的地方，因此爲了與人方便也是與己方便，就繼續寫幾篇吧～😄，不過既然以前的叫作入門系列，這個就叫作進階吧～

Next.js新手入門系列地址

Next.js腳手架進階系列

• 完美契合ant-design
• 封裝fetch && 增長中間件
• 部署上線

使用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編譯，編譯事後文件夾結構以下：

能夠看到不只結構發生了變化，名稱也發生了變化，應該是內置webpack進行了css方面的優化吧。 總之如今這樣，再使用v6版本的代碼，咱們瀏覽器就會報一個錯，以下圖所示：

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

• 打包後ant-design的custom文件被覆蓋的問題

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

【解決辦法】：

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

3. 之前的我懵懂無知，可能第二種是最好的解決辦法，可是直到我發現了下面最完美的解決辦法。

// 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-Antd-Scaffold

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

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