使用 Next.js 和 reactstrap

90 浏览
0 Comments

使用 Next.js 和 reactstrap

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

我似乎遇到了导入名为bootstrap/dist/css/bootstrap.min.css的CSS文件的问题，就像reactstrap指南所说的那样。

我看到的错误是在bootstrap/dist/css/bootstrap.min.css中出现错误

模块解析失败：意外的标记（6:3），您可能需要适当的加载程序来处理此文件类型。

有人知道我需要做什么才能使其正常工作吗？ 我是一名新的Web开发人员，所以如果我遗漏了什么明显的内容，敬请谅解。

谢谢！

admin 更改状态以发布 2023年5月25日
0

2 答案

0 Comments

如果您仍然出现以下错误：

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

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

0
0 Comments

编辑：从 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 () => Welcome to next.js 7!

你还可以使用几行配置来使用 CSS 模块。更多信息请查看 nextjs.org/docs/#css 文档。

早于 Next.js 7 的版本

Next.js 不会默认包含 CSS 导入。你需要使用 webpack loader。你可以在这里了解它的工作原理：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. 您创建 pages/ 中的 _document 文件。
  2. 您在根目录下创建 next.config.js 文件。

使用文档中的代码片段应该使你能够导入 CSS 文件。

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

0