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）