Next引入Antd和Sass

jiezi

5 年前

这里并不是 Next 引入 Antd 或者 Sass 教程！！
这篇文章讲的是如何在 next 里同时引入 sass 和 antd

我想在 Next 里引入 Antd 框架，跟着网上教程将 antd 引入到框架中后，我又想引入 scss 但这时候就报错了。
因为 next 本身支持解析 css, 网上的文档和教程包括官方文档都是 @next/css, 或者 @next/sass 两个插件引用其一来达到支持 css 和 scss 的效果。
像这样：

// scss
const withSass = require('@zeit/next-sass')
module.exports = withSass({})
//css
const withCSS = require('@zeit/next-css')
module.exports = withCSS({/* config options here */})

但是两个插件只能取其一，如果你引入过 antd 就知道，想使用 antd 需要在全局import 'antd/dist/antd.css'，而引入了这个 css 文件那么就需要用上 next-css 插件，用了这个插件我们就用不了 next-scss，这就是问题的所在了。

在这里就不具体写怎么在 next 里单独引入 antd 或者 scss 了，因为网上的其它教程和官方文档已经跟详细了
我在这里假设你已经会单独引用 antd 和 scss 了。
next 官方有一个插件能实现我们的需求：* next-compose-plugins
他能让我们同时引用多个插件

npm install --save next-compose-plugins

next.config.js 改成这样

// next.config.js
const withSass = require('@zeit/next-sass')
const withCss = require('@zeit/next-css');
const withPlugins = require("next-compose-plugins");

module.exports = withPlugins([withSass,withCss], {webpack: (config) => {return config},
});

_app.js 文件不变

import App from 'next/app'

import 'antd/dist/antd.css'

export default App

然后我在 public/assets/css 下新建了一个 test.scss

这个文件有简单的 css 样式

.test{color: red;}

pages/index.js 将其引入

import {Button} from 'antd';
import '../public/assets/css/test.scss'
... 一些代码...
<Button> 测试按钮 </Button> //antd 按钮组件
<h1 className="title test">Welcome to Next.js!</h1> //test.scss 文件测试

最后看看效果：

antd 的按钮样式有了，test.scss 的标题变红样式也有了。
完工！

Next引入Antd和Sass

问题起源

解决办法