在Next.js中使用reactstrap

Question

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

我似乎遇到了这个问题似乎涉及进口名为CSS文件bootstrap/dist/css/bootstrap.min.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.

有谁知道我必须做些什么来使这项工作正常？我是一名新的网络开发人员,如果我遗漏任何明显的事情,请对不起

谢谢!

Answer 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;
}

然后使用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 <版本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. 你在中创建_document文件pages/.
2. 您next.config.js在根目录中创建该文件.

使用文档中的代码片段可以设置为导入CSS文件.

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

Answer 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
  }
})

3. 现在，您应该能够像这样从node_modules导入样式表：

import 'bootstrap-css-only/css/bootstrap.min.css';

注意：使用Next v 8+

背景： 我花了几个小时试图简单地导入作为node_module安装的CSS，并且各种解决方案大多都是棘手的解决方法，但是如上所示，有一个简单的解决方案。

由核心团队成员之一提供