问题:如何在 nextjs 应用中导入外部 css 文件

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

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

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

解答

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

# reactjs
Logo
React

React社区为您提供最前沿的新闻资讯和知识内容

更多推荐

SSR、ISR、CSR、SSG有什么区别

简介 SSR、ISR、CSR 和 SSG 被称为渲染模式,因为它们是 Web 应用程序相互渲染的不同方式。在本文中,我们将详细研究它们中的每一个,并讨论使用它们的 Web 技术/框架的类型。 企业社会责任 CSR 代表客户端渲染。这是一个将页面加载到客户端浏览器而不是服务器上的过程。 CSR 是一种呈现模式,其中浏览器向服务器发送请求,服务器通过发送一个空的 HTML 页面进行响应,其中仅包含对

avatar React

React 中具有“显示更多/更少”功能的代码列表项

我想在我的页面上显示一个元素列表,并且我希望每个元素都具有“显示更多/更少”功能来随意扩展和缩短文本。 为此,我将使用 React。我将从以下虚拟 API 获取一些假数据 u003d>jsonplaceholder.typicode.com 我将使用axios这样做。 我的结构中将包含三个页面:App.js、Texts.js 和 Text.js。 你可以在这里找到 repo u003d>githu

avatar React

React::Angular

苹果与橙子 Angular vs. React:比较苹果和橘子 有人说比较 React 和 Angular 就像比较_苹果和橘子_。 一个是处理视图的库,另一个是_完整的框架_。 反应 React 由 Facebook 开发和维护,并用于他们的产品,包括 Instagram 和 WhatsApp。它自 2013 年以来已经存在了大约,所以它并不是全新的。它也是 GitHub 上最受欢迎的项目之一,

avatar React