初步学习next.js-6-使用antd
<p><span style="font-size: 18pt">首先需要让next支持css文件</span></p><div class="cnblogs_code">
<pre>yarn add @zeit/next-css</pre>
</div>
<p>建立一个<code>next.config.js</code></p>
<div class="cnblogs_code">
<pre>const withCss = require('@zeit/next-css'<span style="color: rgba(0, 0, 0, 1)">)
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(<span style="color: rgba(0, 0, 255, 1)">typeof</span> require !== 'undefined'<span style="color: rgba(0, 0, 0, 1)">){
require.extensions[</span>'.css']=file=><span style="color: rgba(0, 0, 0, 1)">{}
}
module.exports </span>= withCss({})</pre>
</div>
<p> </p>
<p><span style="font-size: 18pt">加载ANTD</span></p>
<div class="cnblogs_code">
<pre>yarn add antd</pre>
</div>
<p>因为直接引入，包很大，所以要按需引入</p>
<div class="cnblogs_code">
<pre>yarn add babel-plugin-import</pre>
</div>
<p>在项目根目录建立<code>.babelrc</code>文件</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span>"presets":["next/babel"],<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">Next.js的总配置文件，相当于继承了它本身的所有配置</span>
"plugins":[ <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">增加新的插件，这个插件就是让antd可以按需引入，包括CSS</span>
<span style="color: rgba(0, 0, 0, 1)"> [
</span>"import"<span style="color: rgba(0, 0, 0, 1)">,
{
</span>"libraryName":"antd"<span style="color: rgba(0, 0, 0, 1)">,
</span>"style":"css"<span style="color: rgba(0, 0, 0, 1)">
}
]
]
}</span></pre>
</div>
<div class="cnblogs_code">
<pre>import Myheader from '../components/myheader'<span style="color: rgba(0, 0, 0, 1)">
import {Button} from </span>'antd'<span style="color: rgba(0, 0, 0, 1)">
import </span>'../static/test.css'
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> Header(){
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><>
<Myheader />
<div>JSPang.com</div>
<div><Button>我是按钮</Button></div>
</>
<span style="color: rgba(0, 0, 0, 1)"> )
}
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> Header</pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/lxz-blogs/p/13152113.html
頁:
[1]