next.js 集成css antd

亘古

next使用 @zeit/next-css 支持import css

安装：npm install --save @zeit/next-css || yarn add @zeit/next-css
配置：

// next.config.js
// next支持import css
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
  /* config options here */
})

 

next集成antd

安装：yarn add antd  &&  yarn add babel-plugin-import --dev　

配置：

// .babelrc
// 重写扩展next的babel默认配置
{
  "presets": ["next/babel"],
  // antd babel-plugin-import 配置  style：true 优化打包
  "plugins": [["import", { "libraryName": "antd"}]] // style:css 选项配置与webpackmincss有bug
}

全局引入antd.css:

// pages/_app.js
// 重写覆盖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)　　

使用：

import { Button } from 'antd';

export default ({counter, user, add, rename}) => 
    <Button>CLICK</Button>

　　

以上。　

来源：https://www.cnblogs.com/kongchuan/p/12197171.html