nextjs 引入scss后路由无法跳转

Question

/src/pages/index.js

import Link from "next/link"

const Index = () => (
    <div>
        <Link href="/demo">jump</Link>
    </div>
)
export default Index

/src/pages/demo.js

import "../assets/scss/demo.scss"

const Demo = () => (
    <div className="bg-red">
        Demo page
    </div>
)
export default Demo

/src/assets/scss/demo.scss

.bg-red {
    background-color: #f00;
}

点链接jump后页面无法跳转，但终端有反应，注释import "...scss"后就可以跳转。

/next.config.js

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

package.json

{
  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "next": "^10.0.1",
    "node-sass": "^4.14.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "export": "next export"
  }
}

Answer 1

请修改为

//import "../assets/scss/demo.scss"
import styles from "../assets/scss/demo.scss"

NextJs仅在 pages/_app.js目录下才可以使用全局方式引入样式文件，如果是页面的话需要这么写。