使用Electron和Reactstrap引起错误：Uncaught SyntaxError：Unexpected token：

Question

在尝试使用reactstrap包时，首先安装npm包，然后在Electron boilerplate app中使用。

npm install --save reactstrap react react-dom
npm install bootstrap --save

然后在/app/renderer/app.js中导入Bootstrap CSS。

import 'bootstrap/dist/css/bootstrap.min.css';

我们在JS控制台中遇到了错误。

未捕获的语法错误：意外的标记 :

移除bootstrap CSS的import语句可以消除错误，但应用程序最终没有Bootstrap CSS样式。

问题：如何使reactstrap在Electron应用程序中正常工作？

- Nyxynyx

---

你能检查一下你的webpack配置中是否有css loader吗？ - aks

@aks 我认为样板代码没有使用webpack。由于以前没有从头开始设置过webpack，是否有比安装webpack和配置css loader更简单的方法？ - Nyxynyx

我不知道有什么简单的方法可以做到这一点。最好的方法是配置当前设置以允许使用CSS。它使用的是什么？Gulp？这是一个有用的链接：https://dev59.com/1lsV5IYBdhLWcg3wsgyh - aks

@aks 我认为它也没有使用 gulp。这个样板代码是使用 electron builder 创建的。 - Nyxynyx

Answer 1

基本的电子设置不理解CSS，因此加载CSS文件时会失败。

相反，您可以在.index.html文件的部分中添加以下行：

<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" />

这个电子应用程序（一个特殊的Chromium网页浏览器实例）将加载CSS。

- ZedTuX