Next.js 脚手架进阶 — 完美契合ant-design

4,526 阅读3分钟

前言

上次入门完了之后感觉意犹未尽,总觉得这个脚手架还是不太完美,还有可以改进的地方,所以为了与人方便也是与己方便,就继续写几篇吧~😄,不过既然之前的叫做入门系列,这个就叫做进阶吧~

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编译,编译过后文件夹结构如下:

可以看到不仅结构发生了变化,名称也发生了变化,应该是内置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的包进行更改。以前的文章正好有人给我留言这块。

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

有意见可以留言, 喜欢的给个Star,万分感谢~

QQ群:641113448 (备注:Next.js)