将 reactstrap 与 Next.js 一起使用

Posted 2023-02-21

【中文标题】将 reactstrap 与 Next.js 一起使用

【英文标题】：Using reactstrap with Next.js

【发布时间】：2018-10-04 04:02:45

【问题描述】：

我正在使用 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.

有谁知道我必须做些什么才能使其正常工作？我是一名新的网络开发人员，如果我遗漏了任何明显的内容，非常抱歉。

谢谢！

【参考方案1】：

编辑：从 Next.js 7 开始，支持导入 .css 文件所需要做的就是在 next.config.js 中注册 withCSS 插件。首先安装插件：

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;

然后使用index.js 文件创建pages 文件夹。然后你可以在你的组件中做这样的事情：

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

您还可以使用带有几行配置的 CSS 模块。有关这方面的更多信息，请查看nextjs.org/docs/#css 上的文档。

---

Next.js

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。该插件的文档使其相当简单：

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

使用文档中的代码 sn-ps 应该可以设置您导入 CSS 文件。

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

【讨论】：

您能告诉我如何解决这个问题吗？因为我遵循了这条规则，但我有一个错误！谢谢

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

当然！谢谢你通知我。我找到了一个解决方案，它在 css-loader-config.js 文件中发生了一些变化！这一行应该注释掉：//minimize: !dev

我个人从我的布局中添加了import css 文件，它本身是从我的pages/_app.tsx 导入的，这样它就会自动包含在每个页面中。我仍然对如何处理 Popper 和 TransitionGroup 库感到迷茫，文档有点糟糕。

感谢您的回答 这是什么意思？ withCSS(/* my next config */) 不确定“我的下一个配置”在这种情况下是什么意思。 @mtl

【参考方案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 解决方法，但如上所示，有一个 simple solution。

它是由一名核心团队成员提供的

【讨论】：

+1 当我尝试添加 webpack 编译的 css 文件时，这对我有用。只是让其他人知道他们是否遇到了同样的问题。

【参考方案3】：

Next.js 9.3 及以上版本

从Next.js 9.3 开始，您现在可以直接将 SCSS 文件作为全局样式表导入。阅读更多关于 next.js 内置 SASS support here。

npm install sass reactstrap bootstrap

索引.scss

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