将 Reactstrap 与 Next.js 结合使用

2024-02-20

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

我似乎遇到的问题似乎涉及导入名为的 CSS 文件bootstrap/dist/css/bootstrap.min.css as the 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.

有谁知道我必须做什么才能使其正常工作?我是一名新的网络开发人员,如果我遗漏了任何明显的东西,我很抱歉。

Thanks!


编辑:从 Next.js 7 开始,要支持导入 .css 文件,您所要做的就是注册withCSS https://github.com/zeit/next-plugins/tree/master/packages/next-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;
}

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

// ./pages/index.js
import "../index.css"
export default () => <div>Welcome to next.js 7!</div>

您还可以通过几行配置来使用 CSS 模块。有关这方面的更多信息,请查看有关的文档nextjs.org/docs/#css https://nextjs.org/docs/#css.


Next.js

默认情况下,Next.js 不附带 CSS 导入。您必须使用 webpack 加载器。您可以在此处了解其工作原理:https://zeit.co/blog/next5#css,-less,-sass,-scss-and-css-modules 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 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.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 Reactstrap 与 Next.js 结合使用 的相关文章

  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状
  • 在打字稿中导入 json

    我是 typescript 的新手 在我的项目中 我们使用 typescript2 在我的要求之一中 我需要导入 json 文件 所以我创建了 d ts 文件如下 test d ts declare module json const va
  • 防止 iOS 键盘在 cordova 3.5 中滚动页面

    我正在使用 Cordova 3 5 和 jQuery mobile 构建 iOS 应用程序 我在大部分应用程序中禁用了滚动功能 但是 当我选择输入字段时 iOS 键盘会打开并向上滚动页面 我不想要这个功能 由于输入足够高 键盘不会覆盖它 我
  • 设置 cookie 时中断 JavaScript 执行

    当设置 cookie 时 是否可以始终中断浏览器开发人员工具中的 javascript 执行 无需显式设置 JS 断点 document cookie 在 html head 块的开头添加此代码片段效果很好
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j
  • 如何解决 Typescript 构建中的错误“找不到模块 'jquery'”

    我目前在 ts 文件的顶部有这个import require jquery 我这样做是因为我试图在我的打字稿文件中使用 jquery 但我似乎无法编译它 因为它返回标题中所述的错误 我正在使用 ASP NET CORE 脚本文件夹 tsco
  • window.location 和 location.href 之间的区别

    我对之间的区别感到困惑window location and location href 两者似乎都以相同的方式行事 有什么不同 window location是一个对象 它保存有关当前文档位置的所有信息 主机 href 端口 协议等 lo
  • React onClick 事件仅在渲染组件时触发

    动态渲染组件的 onClick 函数应通过 useState 设置所选日期 imgs 上的 onClicks 完全按照您的预期工作 没有任何问题 即使只是在其位置放置一个带有 onClick 属性的 div 也是行不通的 当组件渲染时 on
  • 为什么我们在打字稿中使用 HTMLInputElement ?

    我们为什么使用 document getElementById ipv as HTMLInputElement value 代替 document getElementById ipv value 功能getElementById返回具有类
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • Vuejs 2:去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不
  • className 属性是否承担 Reactjs 中 id 属性的角色?

    由于 id 属性在 Reactjs 组件中很少使用 因为 id 属性意味着组件不会被重用 那么是否使用 className 属性来代替 id 呢 如果是这样的话 那么 Reactjs 中相当于 HTML 中的 class 属性的是什么 cl
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • 在 Javascript 中连接空数组

    我正在浏览一些代码 我想知道这有什么用处 grid push concat row 根据我的理解 它等同于 grid push row 为什么要大惊小怪 连接 你想使用 concat当您需要展平数组并且没有由其他数组组成的数组时 例如 va
  • Javascript - 水波纹效果

    我需要 JS 上的脚本 它将以 水波纹 样式更改 images html 抱歉 6MB GIF 文件 http fcuunited ru temp listening2 gif http fcunited ru temp listening
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • 使用 Vite 和 React 进行生产构建时出错:Uncaught TypeError 中的错误:_ 不是函数

    我在我的网站上使用 Vite React React Router 和 TypeScript 我在运行生产构建时遇到问题 在开发模式下一切正常 使用生产版本时 我的浏览器显示白色背景 并且在浏览器控制台中出现以下错误 上面的链接将我带到第
  • 从 FileReader 设置背景图像样式

    我正在寻找一种解决方案 允许我从文件上传输入中获取文件并通过设置 document body style backgroundImage 来预览它 以下代码用于在 Image 元素中显示预览 function setImage id tar
  • 如何在执行新操作时取消先前操作的执行?

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro

随机推荐

  • needDisplayForKey/actionForKey 覆盖是否正常工作?

    我正在尝试将一些在 Objective C 中运行的代码转换为 Swift 我遇到的问题是 needsDisplayForKey actionForKey 没有以相同的方式被调用 据我所知 自定义键值未正确传递 这是我调试时得到的结果 默认
  • 讲解Tkinter文本搜索方法

    我不太明白 text search 方法是如何工作的 比如有一句话 Today a red car appeared in the park 我需要找到a red car序列并突出显示它 它已找到 但我的突出显示如下所示 我在用self t
  • ggplot2:调整 R 中 PCA 双图中 PCA 载荷的标签位置

    Issue 我制作了一个PCA biplot使用包ggbiplot ggplot2 我使用该函数延长了载荷 箭头 geom segment 我想删除原始加载 短箭头 保留较长加载 新箭头 保留带有灰色背景的标签 但重新定位它们 使它们不重叠
  • ElasticSearch术语聚合后如何返回每个桶的所有文档?

    我使用以下简单查询来搜索弹性索引中的文档 query query string query test aggregations myaggregation terms field myField raw size 0 这将返回每个不同值的文
  • 修剪或剪切使用 mediarecorder JS 录制的音频

    所需知识 如何 从前面 缩短音频 blob 数组并仍然具有可播放的音频 Goal 我最终尝试使用 JS 录制连续 45 秒的音频循环媒体记录器 https developer mozilla org en US docs Web API M
  • 使用 C# 枚举嵌套的 AD 用户组

    我编写了一些代码来获取组和嵌套组的所有用户 我还想确保如果组成员身份通过使第一个组成为最后一个组的成员而导致循环 则不会发生循环 我写的代码工作正常 但有点慢 这是我第一次尝试进行 AD 查找 有人可以看一下并告诉我代码看起来正常还是编码错
  • expo-video-player 出现问题,它抛出错误:setAudioModeAsync

    我的 expo video player 包有问题 我想通过 expo video player 显示视频 但是当我加载组件时它会抛出错误 我不知道如何解决它 所以我需要帮助 我尝试更改包源代码和组件道具 但它不起作用 这是代码 来自 ex
  • 使用 std::variant 强制使用通用接口,无需继承

    假设你有一些类似的课程Circle Image Polygon为此 您需要强制执行一个如下所示的通用接口 不是真正的代码 struct Interface virtual bool hitTest Point p 0 virtual Rec
  • Javascript正则表达式分割拒绝null

    是否可以让 JavaScript 正则表达式拒绝空匹配 是否可以告诉 String split 方法拒绝 null 值 console log abcccab split c result ab ab desired result ab a
  • ssh命令输出保存在shell脚本中的文本文件中

    我想编写shell脚本 其中我使用ssh命令 无论我通过 ssh 命令获得什么输出 我都想将其保存在文本文件或变量中 这样我就可以在我的 shell 脚本中使用它 目前我正在将输出保存在变量中 但是当我在 ssh 命令之外使用该变量时 值显
  • Google Maps API - 数组和 InfoWindows 的问题

    抱歉 如果这是微不足道的 但我是 JS 的新手 并且已经解决这个问题几个小时但无济于事 function initialize geocoder new google maps Geocoder var latlng new google
  • 无法为 BigDecimal 定义单例方法“encode_with”

    当尝试更新我的模型之一时 我遇到了异常can t define singleton method encode with for BigDecimal 我正在使用 Rails 3 0 7 和 Ruby 1 9 2 滑板场控制器 def up
  • 在 Perl 中打印 .00001 的解决方法

    我有这个程序 my d 40000 100 360 print At the equator n printf 9s 10 3f meters n 10 10 d for 0 7 它输出 At the equator By the way
  • C++ 已弃用从字符串常量到“char*”的转换

    我有一个私人课程char str 256 为此我有一个显式的构造函数 explicit myClass char func strcpy str func 我称其为 myClass obj example 当我编译这个时 我收到以下警告 已
  • (TableLayout)findViewById(空指针异常

    我整天都在寻找答案 但是当我尝试获取表格布局时 我得到的是空值 我发现信息表明它可能是另一个同名的表格布局 但只有一个 我的 xml 文件 my xml http filebin ca A1sZlhzeV0b 我的代码在这里layout6
  • 通用列表的动态排序标准

    这样做的目的是避免编写大量的 if 语句 这是我当前的代码 public override List
  • 如何在打开新对话框之前关闭所有 jquery ui 对话框?

    我想在打开新对话框之前关闭所有 jquery 对话框 我正在尝试使用以下代码 ui dialog content dialog close 它可以工作 但它也太接近新对话框了 请帮助我任何人 Try ui dialog content no
  • SQL 联合到 NHibernate 标准

    有没有办法将此 SQL 语句转换为 NHibernate Criteria select b1 FieldA as Name b1 FieldA as FullName from Sale b1 where b1 FieldA like j
  • 如何在 React Native 中将图标放入 TextInput 中?

    我正在考虑有这样的事情https android arsenal com details 1 3941 https android arsenal com details 1 3941其中有图标 按下该图标即可将密码显示为纯文本 而不是点
  • 将 Reactstrap 与 Next.js 结合使用

    我正在使用创建一个 React 应用程序Next js我正在尝试使用提供的组件reactstrap 我似乎遇到的问题似乎涉及导入名为的 CSS 文件bootstrap dist css bootstrap min css as the re