javascript - 将 Reactstrap 与 Next.js 结合使用

Question

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

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

我看到的错误是 Error in bootstrap/dist/css/bootstrap.min.css
模块解析失败:意外标记 (6:3) 您可能需要适当的加载程序来处理此文件类型。

有谁知道我必须做什么才能使它正常工作？我是一名新的网络开发人员，如果我遗漏了任何明显的东西，我深表歉意。

谢谢!

Answer 1

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

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 <版本 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。