在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';