Question

尝试在自定义'_document.js'文件中使用scss时遇到问题。

编译结果不会被添加为样式表链接。

这是'_document.js'文件

import Document, { Main, NextScript } from 'next/document'

class CustomDocument extends Document {
  render() {
    return (
      <html lang='es' dir='ltr'>
        <head>
          <meta charSet='utf-8' />
          <link
            rel='stylesheet'
            href='https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i'
          />
        </head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

export default CustomDocument

我正在使用@ zeit / next-sass和node-sass。这是我的next.config.js文件

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

module.exports = withSass()

我错过了什么吗？我需要添加一些配置吗？

谢谢！

Answer 1

您是否将全局scss文件文件导入pages / _app.js中？如果没有pages / _app.js，则应将其分别导入页面文件夹中所有文件的顶部。

如果您正在使用NextJS> 9.3，则现在已内置了对SCSS的支持。您可以删除next.config.js并按照以下链接中的说明添加设置。

https://nextjs.org/blog/next-9-3#built-in-sass-support-for-global-stylesheets

SCSS文件的编译结果不会添加到自定义_document js文件中。 NEXTJS

1 个答案: