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

Question

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

的错误

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

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

Answer 1

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

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

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

Answer 2

你可以在nextjs的head中添加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 也应该在静态文件夹中。向 link 标记添加一个键以在多个页面中重复使用 css。如果跨页面的键相同，则下一个服务器不会重新加载 css，而是会重新使用 css 文件。

这样就不需要任何 css 包了。

Answer 3

您首先需要在根目录

中创建一个next.config.js文件

安装下一步-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'

不需要 dangerouslySetInnerHTML

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

How to import external css file in nextjs app

reactjs

css-import

nextjs

webpack-loader