使用带有Next.js的Reactstrap

Question

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

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

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

有人知道我要做什么才能让它正常工作吗？我是一个新的网络开发人员，如果我遗漏了任何明显的东西，我感到非常抱歉。

谢谢




Answer 1

从Next.js 9.3开始，您现在可以直接将SCSS文件作为全局样式表导入。在这里阅读更多关于next.js内置SASS支持的信息。

npm install sass reactstrap bootstrap

Index.scss

@import '~node_modules/bootstrap/scss/bootstrap';

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

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

注意：使用Next v 8

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

它由一名核心团队成员提供

Answer 3

编辑：从Next.js7，所有你必须做的支持导入. css文件是注册与CSS插件在您的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/index.js
import "../index.css"
export default () => <div>Welcome to next.js 7!</div>

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

Next.js

默认情况下，Next.js不附带CSS导入。你必须使用网页包加载器。您可以在此处阅读此功能的工作原理：https://zeit.co/blog/next5#css、-less、-sass、-scss和css模块。

Next.js也有CSS、SASS和SCSS的插件。这里是CSS的插件：https://github.com/zeit/next-plugins/tree/master/packages/next-css.该插件的留档使其相当简单：

1. 您可以在页面中创建\u文档文件

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

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