reactcss异步加载,ReactNext.js基本配置（antd按需加载，next支持原本的css）

1、全局安装命令行工具

npm install -g create-next-app

2、使用命令建立项目

npx create-next-app project

3、查看是否成功创建next项目

cd project

yarn dev

4、让next支持css

yarn add &＃64;zeit/next-css

配置&＃xff1a;根目录下新建next-config.js

进去&＃xff1a;

const withCss &＃61; require(&＃39;&＃64;zeit/next-css&＃39;)

if(typeof require !&＃61;&＃61; &＃39;undefined&＃39;){

require.extensions[&＃39;.css&＃39;]&＃61;file&＃61;>{}

}

module.exports &＃61; withCss({})

Ant Design 按需加载配置

1、给项目加入antd

yarn add antd

2、安装babel-plugin-import

yarn add babel-plugin-import

3、项目根目录下面新建一个.babelrc文件

代码如下

{

"presets":["next/babel"], //Next.js的总配置文件&＃xff0c;相当于继承了它本身的所有配置

"plugins":[ //增加新的插件&＃xff0c;这个插件就是让antd可以按需引入&＃xff0c;包括CSS

[

"import",

{

"libraryName":"antd"

}

]

]

}

4、新建_app.js文件&＃xff0c;全局引入css

代码如下

import App from &＃39;next/app&＃39;

import &＃39;antd/dist/antd.css&＃39;

export default App

这样Ant Design就可以按需引入了。即哪个页面需要就自己引入&＃xff0c;并不会所有都引入。

你的答案

发布了66 篇原创文章 · 获赞 12 · 访问量 1万&＃43;

私信

关注

标签&＃xff1a;yarn,next,React,import,antd,js,css

来源&＃xff1a; https://blog.csdn.net/zlk4524718/article/details/103953738