{`body{}`}Next.js入门系列（一）你好Next.js（二）添加Antd&&CSS（三）目录重构&&浅谈路由陆续更新...就个人而言，我对脚手架的UI有一种执念。搭建的话就是首页+标签跳转，真不是我处女座的作风，所以想引用第二步的UI框架——ant-design，相信很多用react的开发者也使用这个UI框架。因为之前准备的时候经常挖坑，所以记录一下~既然安装依赖是安装ant-design，那么这两个东西肯定少不了，一个是antd，一个是antd官方按需加载的babel插件babel-plugin-import。//安装依赖yarnaddantdbabel-plugin-import因为现在大部分开发环境已经过渡到ES6/ES7语法，所以还需要安装一个babel装饰器转换插件babel-plugin-transform-decorators-legacy,老实说这个插件具体是干什么的我没怎么看，不过在babel里安装配置好之后就可以用antd了。当然还有其他方法，我这里就用这个方法~//在根目录新建.babelrc文件{"presets":["next/babel"],"plugins":["transform-decorators-legacy",["import",{"libraryName":"antd","style":"css"}]]}配置好了，试试看，yarndev启动项目，呃，报错很多，为什么？？在服务器端渲染时，似乎是节点端的问题。我不知道具体细节，因为它是一个介绍。有高手指导。如能留言指教小弟，将不胜感激。反正还是看看吧，因为在配置其他脚手架的时候，webpack里面需要配置一些东西。怎么可能没有这个配置文件呢？当然有，但它已被重命名并称为next.config.js。我在网上查了一下。官方的解决方法是引入next-css包，然后require.extensions['.css'],还是那句话，没看懂，后面会深入研究，目前目的是可用~但是如果你找到了配置方案，写在这里。//安装依赖yarnadd@zeit/next-css//在根目录下创建next.config.js，内容如下/*eslint-disable*/constwithCss=require('@zeit/next-css');//修复：当nodeif(typeofrequire!=='undefined')需要.css文件时防止错误与CSS（）;是的，现在我们启动了，没有报错。毕竟是官方的解决方案，还是好用的~把首页的a标签换成antd的按钮试试效果。效果如下：嗯，没那么简单，而且这个怎么了，没有报错也没有提示，很明显是样式没有加载。..继续查，OK，我明白了，其实antd的样式早就有了，只是页面上没有介绍而已。你为什么这么说？看下面两张图：可以看到，第一张是渲染出来的页面的head标签中没有CSS样式，第二张是antd样式文件已经打包到.static文件夹下了。下一个文件夹。原因找到了，接下来就是解决问题了。Next.jsHead组件解决了我们需要在页面中放置style.css的问题，但是我找遍了整个项目目录，也没找到普通ReactSPA的index.html，太丢脸了。有问题还是要找官方文档。检查后，我发现了这个东西。团长，如果想看具体的，可以点开官网。很详细~，就是我们可以通过这个head组件来为我们的页面添加head信息。///pages/index.jsimportReact,{Fragment}from'react';import{Button}from'antd';importLinkfrom'next/link';importHeadfrom'next/head';constHome=()=>(Next-Antd-Scafflod我是Next的主页用户列表页);exportdefaultHome;OK，到这里就有点NB了，O(∩_∩)O哈哈~，真是挖矿系列，配置一个UI组件好麻烦。估计接下来还要踩坑！ExtractingtheHeadtoLayout一般的应用程序都会有菜单导航栏之类的，所以页面会做页面的事情。把头放进去感觉很奇怪。我们按照习惯将Head抽取出来作为高级父组件。.作为个人习惯，我新建了一个components文件夹，在里面新建了一个Layout.js。///components/Layout.jsimportHeadfrom'next/head';exportdefault({children})=>(Next-Antd-Scafflod{`body{}`}{children});///pages/index.jsimportReact,{Fragment}from'react';import{Button}from'antd';importLinkfrom'next/link';importLayoutfrom'../components/Layout';constHome=()=>(HelloNext.js用户列表页);导出默认主页；说到这里，整个Antd的配置就基本完成了，哈哈，没想到写了这么多antd的配置，真是厉害啊~自从有了UI框架，顺便说一句，我让我们也写CSS。看看Next官网，可以清楚地了解到它提倡css-in-js。具体链接请点击此处。接下来Css-in-Js，说白了，可以理解为用Vue-like的形式写在React中，在组件内部使用如下形式修改样式{`p{color:蓝色的;}div{背景：红色；}@media（最大宽度：600px）{div{背景：蓝色；}}`}{`body{背景：黑色；}`这里需要注意的是，组件内部的css并不是从子组件继承父组件，而是在组件内部使用，如果想让子组件继承父组件的样式，你需要将样式jsx更改为样式全局jsx。说实话，越看越像Vue。^_^除了上面官方推荐的方法外，还有很多其他的方法Css-in-Js的sample，其中我个人比较推荐styled-components，有兴趣的可以去看官方文档，就是写得真好。之前用antd的时候，我会重新设置它自己的配色和一些其他的默认属性。这里我使用了之前的方法，结果是错误的。之前的方法依赖babel-plugin-import，在babelrc文件中，将"style":"css"改为"style":true，这样babel-plugin-import就会加载.less文件，然后配置修改webpack中less-loader的Vars变量覆盖：config.module.rules.push({test:/\.less$/,use:[{loader:"style-loader"},{loader:"css-loader"},{loader:"less-loader",options:{sourceMap:true,modifyVars:AntdTheme}}]})但是如果在接下来的框架中使用less的方式引入服务端渲染，就很难通过了它。这是坑吗？还有个没找到解决办法，暂时先这样吧，改了其实也可以改，直接用下面的方法就行了，无关紧要~{`.ant-btn-primary{background-color:#ec6a00}`}你看，可以改，不过我个人觉得antd的配色挺好的，哈哈，还是别改了。我觉得官方后续会加强！可能官方的解决方案早就有了，但是我还是不知道怎么用？因为我看到除了next-css包之外，还提供了next-less包。这个包应该用于加载更少的文件。我检查了这个包也支持css-modules，但是我配置了它，还是不对。而且我对现在的写法还是觉得很舒服，所以也没有浪费太多时间。如果你有兴趣，你可以克服它。如果你解决了，你可以给我一个地址。非常感谢~总结的第二部分已经写完了。本来以为简单两步就搞定了，没想到中间踩了那么多坑，因为我是边建工程边写的，所以个人觉得写的比较详细，很适合新手。很少有像我这样有良心的作家了，哈哈。代码地址下一篇：准备讲路由然后简单梳理一下项目骨架，为接下来的redux做准备~
Next.js入门系列（二）——添加Antd&&CSS相关文章
