使用reactstrap与Next.js

Question

我正在使用 Next.js 创建一个 React 应用程序，并尝试使用由 reactstrap 提供的组件。

我遇到的问题似乎涉及导入名为 bootstrap/dist/css/bootstrap.min.css 的 CSS 文件，如 reactstrap 指南所述。

我看到的错误是：Error in bootstrap/dist/css/bootstrap.min.css Module parse failed: Unexpected token (6:3) You may need an appropriate loader to handle this file type.

有人知道我需要做什么才能使它正常工作吗？我是一名新的网络开发人员，如果我遗漏了任何明显的内容，请见谅。

谢谢！

- gsapienza

Answer 1

编辑：从 Next.js 7 开始，仅需在 next.config.js 中注册 withCSS 插件即可支持导入 .css 文件。首先安装插件：

npm install --save @zeit/next-css

接下来在你的项目根目录下创建next.config.js文件，并添加以下内容：

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({/* my next config */})

您可以通过创建简单的页面并导入一些 CSS 来测试其是否可用。首先创建 CSS 文件：

// ./index.css
div {
    color: tomato;
}

接着创建一个 pages 文件夹，并在其中添加一个 index.js 文件。然后你就可以在你的组件中做这样的事情：

// ./pages/index.js
import "../index.css"
export default () => <div>Welcome to next.js 7!</div>

您还可以使用几行配置来使用CSS模块。有关详细信息，请查看nextjs.org/docs/#css上的文档。

---

Next.js <版本7

默认情况下，Next.js不提供CSS导入功能。您需要使用webpack加载器。请参阅此处的工作原理：https://zeit.co/blog/next5#css,-less,-sass,-scss-and-css-modules。

Next.js还具有用于CSS、SASS和SCSS的插件。这是CSS插件：https://github.com/zeit/next-plugins/tree/master/packages/next-css。该插件的文档使其相当简单：

1. 在pages/中创建_document文件。
2. 在根目录中创建next.config.js文件。

使用文档中的代码片段应该能够让您导入CSS文件。

您需要至少5.0版本。您可以确保安装了最新的Next.js：npm i next@latest。

- mtl

---

请问您能告诉我如何解决这个问题吗？因为我按照这个规则做了，但是出现了错误！谢谢。 - Hamed

嗨@Hamed，评论用于请求澄清或指出帖子中的问题，因此我无法在评论部分为您提供帮助。如果您需要解决代码问题，您可以随时打开一个新问题，在其中描述您遇到的问题并包括任何错误消息。有很多人准备好帮助，所以不要害怕提问 :)。 - mtl

当然！谢谢你告诉我。我找到了一个解决方案，只需要在 css-loader-config.js 文件中进行一些小的更改！应该注释掉这一行： // minimize: !dev - Hamed

我个人从我的布局中添加了import css文件，该布局本身是从我的pages/_app.tsx导入的，这样它就会自动包含在每个页面中。关于Popper和TransitionGroup库，我仍然不知道该怎么做，文档有点糟糕。 - Vadorequest

谢谢你的回答，这是什么意思？withCSS({/* my next config */}) 我不确定在这个上下文中"my next config"是什么意思。@mtl - FabricioG

@FabricioG，你现在在 next.config.js 文件中，{/* my next config */} 是你编写配置选项的地方。 - mtl

Answer 2

如果您仍然收到该错误：

Unexpected token (6:3) You may need an appropriate loader to handle this file type. 

在你的 next.config.js 文件中尝试以下代码：

// next.config.js 
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})

现在您应该能够像这样从node_modules中导入样式表：

import 'bootstrap-css-only/css/bootstrap.min.css';

注意：使用 Next v 8+ 版本

背景： 我花费了几个小时尝试导入一个作为 node_module 安装的 CSS，而各种解决方案大多是 hacky（笨拙的）解决方法，但正如上面所示，有一种简单的解决方法。

这个解决方法由核心团队成员提供。

- Greg Tomasik

---

+1 当我尝试添加一个webpack编译的CSS文件时，这对我很有效。只是想让其他人知道，如果他们遇到同样的问题。 - designtocode

Answer 3

Next.js 9.3 及以上版本

从 Next.js 9.3 开始，您现在可以直接导入 SCSS 文件作为全局样式表。了解有关 next.js 内置 SASS 支持的更多信息，请点击此处。

npm install sass reactstrap bootstrap

Index.scss

@import '~node_modules/bootstrap/scss/bootstrap';

- Jeremy Lynch