8

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

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

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

4

3 回答 3

11

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

于 2017-12-17T13:33:02.220 回答
10

您首先需要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'

不需要危险的SetInnerHTML

于 2018-11-15T09:26:21.743 回答
-1

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

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

  2. dangerouslySetInnerHTML使用atrender方法在组件中注入样式

    render() {
  return (
    <div>
      <style dangerouslySetInnerHTML={{ __html: rsStyles }} />
      // rest of your component code 
      // where you can use the injected styles
    </div>
  );
}
于 2017-12-04T07:06:23.653 回答