Next引入Antd和Sass

这里并不是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的标题变红样式也有了。
完工！