Electron：如何在 index.html 中导入或包含使用 npm 包管理器安装的 CSS？答案

【问题标题】：Electron: How to import or include CSS installed using npm package manager in our index.html?Electron：如何在 index.html 中导入或包含使用 npm 包管理器安装的 CSS？
【发布时间】：2020-07-24 12:34:51
【问题描述】：

在开发过程中，我们的 Electron 项目的根目录中有 node_modules 文件夹，其中包含我们已安装的所有包。因此，在开发过程中，我们可以编写这样的代码来将我们的 CSS 文件导入到我们的网页中：

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

我们如何在没有node_modules 的情况下为要打包和分发的项目包含 CSS？

编辑：经过一些研究，我发现node_modules 不适合以这种方式使用（请参阅this）。不过，如果将来有什么变化，请随时添加您的答案。

链接到我开始使用的存储库：https://github.com/electron/electron-quick-start

【问题讨论】：

标签： node.js electron

【解决方案1】：

在做了一些研究之后，由于您使用的是原始样板，因此我安装了它并按照您所说的进行了操作。由于您的主要问题是在打包时在生产中导入样式表，您可以使用electron-packager 来构建您的应用程序，这将导致后者独立于您在开发期间安装的节点模块。您可以执行以下步骤进行测试：

npm i
npm i bootstrap --save
在头部添加了<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
为了测试在正文中添加了<button type="button" class="btn btn-danger">Button</button>
npm install electron-packager --save
在package.json 中将"build": "electron-packager . --asar" 添加到您的scripts
npm run build

然后可以看到Bootstrap正在正常使用。

【讨论】：

我按照你写的做了一切，但是当我启动打包的应用程序时，css 样式似乎没有应用于应用程序。你可能会错过什么吗？一些导入或需要？
@Emir 我用整个过程更新了答案