在Next.js中使用reactstrap

问题描述：

我正在使用 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文件c $ c>作为 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 ，您只需注册 withCSS 插件。首先安装插件：

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 文件的文件夹。然后你可以在你的组件中做这样的事情：

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/时代周报/下一插件/树/主/封装/下一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:

您创建 _document 文件在 pages / 。

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

You create the _document file in pages/.
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.

在Next.js中使用reactstrap

相关推荐