将Reactstrap与Next.js一起使用

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

我看到的错误是 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.

有谁知道我该怎么做才能正确地工作？我是一名新的Web开发人员，如果我找不到任何明显的内容，对不起。

谢谢！

回答：

，支持导入.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;
}

然后使用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不附带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. 您在中创建_document文件pages/。

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

使用文档中的代码片段应将您设置为导入CSS文件。

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

以上是 将Reactstrap与Next.js一起使用 的全部内容， 来源链接： utcz.com/qa/414515.html

回到顶部