将reactstrap与Next.js一起使用

作者

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

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

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

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

谢谢

编辑：从Next.js 7开始，要支持导入.css文件，只需在Next.config.js中注册withCSS插件即可。从安装插件开始：

npm安装[email protected]/next css

然后在项目根目录中创建next.config.js文件，并向其中添加以下内容：

//next.config.js
const with css=require（“@zeit/next css”）
module.exports=withCSS（{/*我的下一个配置*/}）

您可以通过创建一个简单页面并导入一些CSS来测试这是否有效。首先创建一个CSS文件：

/./index.css
div{
颜色：番茄；
}

然后用index.js文件创建pages文件夹。然后，您可以在组件中执行以下操作：

/./pages/index.js
导入“./index.css”
导出默认值（）=&gt&书信电报；部门&gt；欢迎来到next.js7&lt/部门&gt；

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

Next.js&lt；第7版

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

js还有用于CSS、SASS和SCS的插件。以下是CSS的插件：https://github.com/zeit/next-plugins/tree/master/packages/next-css. 该插件的文档非常简单：

  1. 您可以在页面/中创建\u文档文件
  2. 在根目录中创建next.config.js文件

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

您至少需要5.0版。您可以确保安装了最新的Next.js:npm [email protected]

相关文章：

  1. 使用React路由器以编程方式导航
  2. 您是否可以在不调用setState的情况下强制React组件重新加载？
  3. 未捕获错误：不变冲突：元素类型无效：应为字符串（用于内置组件）或类/函数，但得到：对象
  4. 使用es6类时，React中的“super（）”和“super（props）”有什么区别？

发表评论

© 2024 开发百科-程序代码问答平台 • Built with