如何在Next.js应用程序中导入外部CSS文件

Question

如何在Next.js应用程序中导入外部CSS文件

14

我正在开发基于React的Next.js应用程序。一些npm包正在使用外部CSS导入。我遇到了以下错误：

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

我如何在我的Next.js应用程序中支持来自外部包的CSS导入？我已经在某个地方检查过了，通过更改next.config.js可以实现。但是我无法找到正确的方法。如果有人能在这方面帮助我，那就太好了。

- Mira Thakkar

6个回答

13

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

不需要使用 dangerouslySetInnerHTML

- Petros Kyriakou

1

这是正确的解决方案，其他一切都是临时应急之策。 - Austin Witherow

1

请注意，自9.2版本以来，Next.js已经内置了对CSS的支持。您不应再使用@zeit/next-css（它也已被弃用）。 - juliomalves

1

你可以将CSS文件直接移动到public文件夹下，路径为/public/{name}.css

然后在src/pages/_document.js文件中引入CSS文件即可。

import { Html, Head, Main, NextScript } from 'next/document'

...
<Head>
   <link href="/{name}.css" rel="stylesheet" />
</Head>
...

- Tushar Kashyap

0

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

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

render() {
  return (
    <div>
      <style dangerouslySetInnerHTML={{ __html: rsStyles }} />
      // 其余组件代码
      // 在此处您可以使用已注入的样式
    </div>
  );
}

- SALEH

0

在 _app.js 中，您可以执行以下操作：

if (someCondition){
import('../styles/rtl.css');
}

- Basheer Adel

这段代码在客户端和/或服务器上运行吗？如果是服务器，它是否为每个请求运行？ - zirqLvgOhM

0

在你的_app.js文件中，将所有的js脚本放在返回块中的

- LongDev

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- illiteratewriter · Accepted Answer

全局 CSS

要添加全局 CSS，请在文件 pages/_app.js 中使用 import '../styles.css'，或者要从 node_modules 导入，则可以类似于 import 'bootstrap/dist/css/bootstrap.css'。

组件级别的 CSS

Next.js 支持使用 [name].module.css 文件命名约定的 CSS 模块。 CSS 模块可通过自动创建唯一类名来本地范围化 CSS。这使您能够在不同文件中使用相同的 CSS 类名而不必担心冲突。

如果你有一个名为 Button 的组件在 Button.js 文件中，为其创建一个名为 Button.module.css 的 css 文件，然后可以通过 import styles from './Button.module.css' 将其引入到 Button 组件中。

文档

旧回答

你可以将 css 文件添加到 Next.js 的 head 中。

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包了。