next.js配置css和scss共用_nextjs css-loader

在next框架中如果你引用了第三方的ui库那么你肯定要引入相应的ui库样式，这样样式基本都是编译后的css文件。然而我们日常开发中的样式要么是scss，less之类的css预处理器。
在next框架中如果不进行相应的配置是不能同时使用css和scss的。

npm install css-loader node-sass @zeit/next-css @zeit/next-sass --save

在根目录下新建next.config.js

const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
 
module.exports = () => withSass(withCSS())

比如我引用了react-bootstrap的轮播图

import { Carousel } from 'react-bootstrap'
import './swiper.scss'
import 'bootstrap/dist/css/bootstrap.min.css';