Nextjs with antd

[yaofly2012]

傻瓜式

1. 先按照antd开场Demo DatePicker

问题：没有样式

2. 引入样式

import 'antd/dist/antd.css';

问题：报错了

Global CSS cannot be imported from files other than your Custom . Please move all global CSS imports to pages_app.jsx.
Read more: https://err.sh/next.js/css-global

全局样式只能在_app.js组件里引用。

Issues:

1. nextjs如何判断CSS是全局的？
   以文件形式存在的css都视为全局的，不管是定义在node_modules目录里的还是项目里的。
   Built-In CSS Support

2. scss/less呢？

3. 把样式引入放入_app.js组件里

OK了，组件可以正常显示了。

3.1. 引入less文件import 'antd/dist/antd.less';

报错了：

error ] ./node_modules/antd/dist/antd.less 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Nextjs默认不会处理less文件，需要借助@zeit/next-less。
next.config.js文件：

const withLess = require('@zeit/next-less');

module.exports = withLess({})

启动还报错：

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in D:\workMore\futool\node_modules\antd\lib\style\color\bezierEasing.less (line 110, column 0)

查了下，需要配置less，修改next.config.js文件：

const withLess = require('@zeit/next-less');

module.exports = withLess({
    lessLoaderOptions: {
        javascriptEnabled: true
    }
})

OK，可以启动了，但是还有个waring:

Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

自定义的CSS loader配置会导致内置的CSS配置失效，但是我们这里是添加的less loader配置，应该不会影响内置CSS/SCSS配置的。

4. 按需加载

按照antd的教程:

1. npm install babel-plugin-import --save-dev
2. 配置下.babelrc

启动报错了：

[ error ] ./node_modules/antd/es/button/style/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm

貌似Next不让加载node_modules目录里的CSS。

咋办？
有官方DEMO有空跑跑！！！

Issues

1. 如何理解按需加载开场白：

注意：antd 默认支持基于 ES module 的 tree shaking，不使用以下插件也会有按需加载的效果

build之后CSS并不大：