next.js 集成css antd
<h2>next使用 <code>@zeit/next-css </code>支持import css</h2><pre><code>安装：npm install --save @zeit/next-css </code><code>|| yarn add @zeit/next-css<br>配置：</code></pre>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">// next.config.js<br>// next支持import css
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
/* config options here */
})
</pre>
</div>
<p> </p>
<h2>next集成antd</h2>
<p>安装：yarn add antd && yarn add babel-plugin-import --dev </p>
<p>配置：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">// .babelrc<br>// 重写扩展next的babel默认配置
{
"presets": ["next/babel"],
// antd babel-plugin-import 配置style：true 优化打包
"plugins": [["import", { "libraryName": "antd"}]] // style:css 选项配置与webpackmincss有bug
}
</pre>
</div>
<p>全局引入antd.css:</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">// pages/_app.js<br>// 重写覆盖next的app.js
import App, { Container } from "next/app";
import Layout from "../components/Layout";
import {Provider} from 'react-redux'
import withRedux from '../lib/with-redux'
import "antd/dist/antd.min.css";
class MyApp extends App {
render() {
const { Component, pageProps, reduxStore } = this.props;
return (
<Layout>
<Provider store={reduxStore}>
<Component {...pageProps} />
</Provider>
</Layout>
);
}
}
export default withRedux(MyApp) </pre>
</div>
<p>使用：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">import { Button } from 'antd';
export default ({counter, user, add, rename}) =>
<Button>CLICK</Button>
</pre>
</div>
<p> </p>
<p>以上。 </p>
<p></audio></p><br><br>
来源：https://www.cnblogs.com/kongchuan/p/12197171.html
頁:
[1]