将 reactstrap 与 Next.js 一起使用 [英] Using reactstrap with Next.js

问题描述

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

I am creating a React app using Next.js and am trying to use components provided by reactstrap.

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

The issue I seem to be running into seems to involve importing the CSS file named bootstrap/dist/css/bootstrap.min.css as the reactstrap guide says to do.

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

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

Does anyone know what I have to do to make this work correctly? I am a new web developer so sorry if I am missing anything obvious.

谢谢！

推荐答案

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

As of Next.js 7, all you have to do to support importing .css files is to register the withCSS plugin in your next.config.js. Start by installing the plugin:

npm install --save @zeit/next-css

然后在你的项目根目录中创建 next.config.js 文件并添加以下内容:

Then create the next.config.js file in your project root and add the following to it:

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

您可以通过创建一个简单的页面并导入一些 CSS 来测试它是否有效.首先创建一个 CSS 文件:

You can test that this is working by creating a simple page and importing some CSS. Start by creating a CSS file:

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

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

Then create the pages folder with an index.js file. Then you can do stuff like this in your components:

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

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

You can also use CSS modules with a few lines of config. For more on this check out the documentation on 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 doesn't come with CSS imports by default. You'll have to use a webpack loader. You can read about how this works here: 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.该插件的文档使其相当简单:

Next.js also has plugins for CSS, SASS and SCSS. Here is the plugin for CSS: https://github.com/zeit/next-plugins/tree/master/packages/next-css. The documentation for that plugin makes it fairly simple:

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

1. You create the _document file in pages/.
2. You create the next.config.js file in the root.

使用文档中的代码片段应该可以让您导入 CSS 文件.

Using the code snippets from the documentation should set you up to import CSS files.

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

You'll need at least version 5.0. You can make sure you have the latest Next.js installed: npm i next@latest.

这篇关于将 reactstrap 与 Next.js 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！