25

我正在使用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 开发人员，如果我遗漏了任何明显的内容，我深表歉意。

谢谢！

4

3 回答 3

35

编辑：从 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：.

于 2018-04-24T13:27:36.570 回答
6

如果您仍然收到错误：

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，各种解决方案大多是 hacky 解决方法，但如上所示，有一个简单的解决方案。

由一名核心团队成员提供

于 2019-03-20T07:59:34.043 回答
1

Next.js 9.3 及更高版本

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

npm install sass reactstrap bootstrap

索引.scss

@import '~node_modules/bootstrap/scss/bootstrap';
于 2020-11-07T05:31:21.860 回答