如何在nextjs应用程序中导入外部css文件

Question

我正在研究基于反应的 nextjs 应用程序。一些 npm 包使用外部 css 导入。我收到类似的错误

Module parse failed, you may need an appropriate loader to handle this file type.

如何在我的 nextjs 应用程序中支持从外部包导入 css。我通过在 next.config.js 中进行更改来检查某个地方，它有效。但我找不到合适的。如果有人能帮助我解决这个问题，那就太好了。

Answer 1

首先需要next.config.js在根目录下创建一个文件

安装 next-css

npm i @zeit/next-css

在 next.config.js

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

重启应用

用法

import 'react-select/dist/react-select.css'

不需要危险的SetInnerHTML

Answer 2

您可以在 nextjs 的头部添加 css 文件。

import Head from 'next/head'

而在render方法中，在return里面添加一个类似于普通HTML的head标签，head标签应该在一个div里面。

<div>
    <Head>
      <title>Test</title>
      <link href="/static/master.css" rel="stylesheet" key="test"/>
    </Head>
</div>

css 也应该在静态文件夹中。为链接标签添加一个键，以便在多个页面中重用 css。如果页面中的键相同，那么下一个服务器将不会重新加载 css，而是会重用 css 文件。

这样也不需要任何 css 包。