将 Electron 与 Reactstrap 一起使用会导致错误：Uncaught SyntaxError: Unexpected token ：答案

【问题标题】：Using Electron with Reactstrap causes error: Uncaught SyntaxError: Unexpected token :将 Electron 与 Reactstrap 一起使用会导致错误：Uncaught SyntaxError: Unexpected token ：
【发布时间】：2019-04-01 08:54:51
【问题描述】：

当尝试通过首先安装 npm 包在 Electron boilerplate app 中使用 reactstrap 包时

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 控制台中收到错误

Uncaught SyntaxError: Unexpected token :

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

问题：我们如何才能让reactstrap 在 Electron 应用中正常工作？

【问题讨论】：

你能检查一下你的 webpack 中是否配置了 css loader 吗？
@aks 我认为样板代码不使用 webpack。之前没有从头设置过 webpack，有没有比安装 webpack 和配置 css loader 更简单的方法？
我不知道有什么方法可以轻松做到这一点。最好的方法是配置当前设置以允许 css。它在用什么？吞咽？这是一个有用的链接stackoverflow.com/questions/35879290/…
@aks 我相信它也没有使用 gulp。样板代码是使用 electron builder 创建的。

标签： javascript reactjs twitter-bootstrap electron reactstrap

【解决方案1】：

基本的电子设置不理解 CSS，因此无法加载 CSS 文件。

相反，您可以将以下行添加到.index.html 文件的<head> 部分：

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

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

【讨论】：