问在Next.js中使用reactstrap

EN

编辑:从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;
}

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

// ./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的插件。该插件的文档让它变得相当简单：

在pages/.

• You中创建

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

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

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

如果仍然出现错误：

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

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

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

注意:使用Next v 8+

背景：我花了几个小时尝试简单地导入作为node_module安装的CSS，各种解决方案大多是老套的变通方法，但如上所述，有一个simple solution。

它是由核心团队成员之一提供的

Next.js 9.3及更高版本

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

npm install sass reactstrap bootstrap

Index.scss

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