在不使用 webpack 的情况下需要 HTML 文件中的 CSS 文件答案

【问题标题】：Require a CSS file in an HTML file without using webpack在不使用 webpack 的情况下需要 HTML 文件中的 CSS 文件
【发布时间】：2020-04-10 16:32:49
【问题描述】：

我正在开发一个 Electron 项目并使用 Electron-packager 来打包我的应用程序。

但是，以我当前的文件夹结构，位于我的 Electron 项目/package.json 的父文件夹中的所有 CSS 文件都不会被复制到打包的应用程序中。

这是我的结构：

- GUI
--- CSS
- Apps
---Demo
------package.json, etc
---Demo2
------package.json, etc
---Demo3
------package.json, etc

我在 Demox 文件夹中构建应用程序。问题是我无法将 GUI 文件夹移动到 Demo/Demo2/Demo3 中，因为它只包含相同的文件，而且是多余的。

但是，electron-packager 不支持从实际 Demox 文件夹之外打包文件。

建议我将这些 CSS 文件移至 node_modules。

但是我如何require这些CSS文件从node_modules文件夹到一个html文件呢？不使用webpack 还有其他方法吗？除非我别无选择，否则我希望保持简单并远离设置 webpack。

作为参考，这是我在 Electron-packager github 上发布的问题： https://github.com/electron/electron-packager/issues/1089

谢谢！

【问题讨论】：

【解决方案1】：

现在能够想出一个解决方案。

由于我已将node_modules 文件夹移动到最根目录（C:\node_modules，因此它可以被驻留在 C: 驱动器中的所有节点项目使用），我只使用了绝对路径和从那里链接：

<link rel="stylesheet" href="/node_modules/sample-css/button.css">

非常适合我的需求。

谢谢大家。

【讨论】：