javascript 在 Next.js 中使用 reactstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49992423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using reactstrap with Next.js
提问by gsapienza
I am creating a React app using Next.jsand am trying to use components provided by reactstrap.
我正在创建一个 React 应用程序，Next.js并尝试使用reactstrap.
The issue I seem to be running into seems to involve importing the CSS file named bootstrap/dist/css/bootstrap.min.cssas the reactstrapguide says to do.
我似乎遇到了这个问题似乎涉及进口名为CSS文件bootstrap/dist/css/bootstrap.min.css作为reactstrap指导说的事情。
The error I am seeing is 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.
我看到的错误是 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.
Does anyone know what I have to do to make this work correctly? I am a new web developer so sorry if I am missing anything obvious.
有谁知道我必须做些什么才能使这项工作正常进行？我是一名新的网络开发人员，如果我遗漏了任何明显的内容，我很抱歉。
Thanks!
谢谢！
回答by mtl
EDIT: As of Next.js 7, all you have to do to support importing .css files is to register the withCSSplugin in your next.config.js. Start by installing the plugin:
编辑：从 Next.js 7 开始，支持导入 .css 文件所需要做的就是在next.config.js中注册withCSS插件。首先安装插件：
npm install --save @zeit/next-css
Then create the next.config.jsfile in your project root and add the following to it:
然后next.config.js在您的项目根目录中创建该文件并将以下内容添加到其中：
// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({/* my next config */})
You can test that this is working by creating a simple page and importing some CSS. Start by creating a CSS file:
您可以通过创建一个简单的页面并导入一些 CSS 来测试这是否有效。首先创建一个 CSS 文件：
// ./index.css
div {
color: tomato;
}
Then create the pagesfolder with an index.jsfile. Then you can do stuff like this in your components:
然后pages用index.js文件创建文件夹。然后你可以在你的组件中做这样的事情：
// ./pages/index.js
import "../index.css"
export default () => <div>Welcome to next.js 7!</div>
You can also use CSS modules with a few lines of config. For more on this check out the documentation on nextjs.org/docs/#css.
您还可以使用带有几行配置的 CSS 模块。有关更多信息，请查看nextjs.org/docs/#css上的文档。
Next.js < version 7
Next.js < 版本 7
Next.js doesn't come with CSS imports by default. You'll have to use a webpack loader. You can read about how this works here: https://zeit.co/blog/next5#css,-less,-sass,-scss-and-css-modules.
默认情况下，Next.js 不附带 CSS 导入。你必须使用 webpack 加载器。您可以在此处了解其工作原理：https: //zeit.co/blog/next5#css,-less,-sass,-scss-and-css-modules。
Next.js also has plugins for CSS, SASS and SCSS. Here is the plugin for CSS: https://github.com/zeit/next-plugins/tree/master/packages/next-css. The documentation for that plugin makes it fairly simple:
Next.js 也有 CSS、SASS 和 SCSS 的插件。这是 CSS 插件：https: //github.com/zeit/next-plugins/tree/master/packages/next-css。该插件的文档使它变得相当简单：
- You create the
_documentfile inpages/. - You create the
next.config.jsfile in the root.
- 您
_document在pages/. - 您
next.config.js在根目录中创建文件。
Using the code snippets from the documentation should set you up to import CSS files.
使用文档中的代码片段应该可以让您导入 CSS 文件。
You'll need at least version 5.0. You can make sure you have the latest Next.js installed: npm i next@latest.
您至少需要 5.0 版。您可以确保您有最新的Next.js安装：npm i next@latest。
回答by Janusz Tomasik
If you are still getting the error:
如果您仍然收到错误：
Unexpected token (6:3) You may need an appropriate loader to handle this file type.
try this in your next.config.js:
在你的 next.config.js 中试试这个：
// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
cssLoaderOptions: {
url: false
}
})
- Now you should be able to import styleshets from node_modules like this:
- 现在你应该能够像这样从 node_modules 导入样式表：
import 'bootstrap-css-only/css/bootstrap.min.css';
Note: Using Next v 8+
注意：使用 Next v 8+
Background:I spent a few hours trying to simply import a CSS installed as a node_module and the various solutions are mostly hacky workarounds, but as shown above, there is a simple solution.
背景：我花了几个小时试图简单地导入作为 node_module 安装的 CSS，各种解决方案大多是hacky 解决方法，但如上所示，有一个简单的解决方案。
It was provided by one of the core team members
它由一名核心团队成员提供
