前言
上次入门完了之后感觉意犹未尽，总觉得这个脚手架还是不太完美，还有可以改进的地方，所以为了与人方便也是与己方便，就继续写几篇吧～?，不过既然之前的叫做入门系列，这个就叫做进阶吧～
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的样式，就用它本身框架带的属性就行，那完全OK，什么都不用做了。
- 自己clone下来ant-design的包进行更改。以前的文章正好有人给我留言这块。
- 以前的我懵懂无知，可能第二种是最好的解决办法，但是直到我发现了下面最完美的解决办法。
// 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，万分感谢～
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
