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

【问题标题】：How to import external css file in nextjs app如何在 nextjs 应用程序中导入外部 css 文件
【发布时间】：2017-11-24 12:48:48
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs nextjs webpack-loader css-import

【解决方案1】：

你可以在 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 包。

【讨论】：

我在根目录下创建了 assets 目录，但它不工作，但不知何故，在检查此评论后，我将目录重命名为 static，现在工作正常。
到目前为止，这个非常简单但难以理解的问题的最简单答案。谢谢±

【解决方案2】：

你首先需要在根目录下创建一个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

【讨论】：

这是正确的解决方案，其他一切都是 hack。

【解决方案3】：

将您的外部 css 文件导入到组件中。例如，react-select 要求您添加他们的样式表以使其样式生效。您可以使用
导入他们的样式表
```
import rsStyles from 'react-select/dist/react-select.css'
```

使用dangerouslySetInnerHTML render 方法在组件中注入样式

render() {
  return (
    <div>
      <style dangerouslySetInnerHTML={{ __html: rsStyles }} />
      // rest of your component code 
      // where you can use the injected styles
    </div>
  );
}

【讨论】：