[英]Using reactstrap with Next.js
我正在使用Next.js
创建一个 React 应用程序,并尝试使用Next.js
提供的reactstrap
。
我似乎遇到的问题似乎涉及导入名为bootstrap/dist/css/bootstrap.min.css
的 CSS 文件,正如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.
有谁知道我必须做什么才能使这项工作正常进行? 我是一名新的网络开发人员,如果我遗漏了任何明显的内容,我很抱歉。
谢谢!
编辑:从 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/
创建_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
}
})
import 'bootstrap-css-only/css/bootstrap.min.css';
注意:使用 Next v 8+
背景:我花了几个小时试图简单地导入一个作为 node_module 安装的 CSS,各种解决方案大多是 hacky 解决方法,但如上所示,有一个简单的解决方案。
它由一名核心团队成员提供
从Next.js 9.3 开始,您现在可以直接将 SCSS 文件导入为全局样式表。 在此处阅读有关 next.js 内置SASS 支持的更多信息。
npm install sass reactstrap bootstrap
索引文件
@import '~node_modules/bootstrap/scss/bootstrap';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.