在 Electron 应用中使用 Foundation

Posted 2023-03-07

【中文标题】在 Electron 应用中使用 Foundation

【英文标题】：Using Foundation in an Electron app

【发布时间】：2016-10-22 23:06:44

【问题描述】：

我正在创建一个新的 Electron 应用程序，我想将 Foundation 用于应用程序和 SASS。问题是 Foundation 希望我创建一个新项目，而我宁愿通过 npm 或在必要时使用 bower 添加 Foundation 我的电子。

最好的方法是什么？

我已成功尝试将 Foundation-sites 作为 npm 依赖项添加到我的 Electron 应用程序的 package.json 中，但我不确定从那里做什么。还有一个基础应用程序替代 Foundation-sites npm 包吗？

【参考方案1】：

第一步是将 Foundation 添加到您的项目中：

npm install foundation-sites --save

这将为您提供 node_modules/foundation-sites/scss/ 中的 Foundation Sass (SCSS) 文件。

假设您在 scss/app.scss 中有项目特定的 SCSS，那么您需要导入 Foundation SCSS，例如：

@import 'node_modules/foundation-sites/scss/foundation.scss';

@include foundation-everything

您的构建过程需要从这些 Sass 文件生成 CSS - 这可以使用各种工具来完成，例如 Gulp、Webpack、Grunt 或简单的 npm 脚本。然后只需在 html 文件中包含 CSS。

Foundation 文档确实使用 Grunt 示例（在 Sass 下）对此进行了介绍，但我花了一段时间才找到它，因为它没有链接到安装说明中。

如果您更喜欢使用 Foundation for Apps，这些说明可以很容易地适用于 foundation-apps 包。

【讨论】：

快速说明：foundation-apps was deprecated 大约在发布此答案的同时。引用自述文件：“我们已决定简化我们的开发并将 Foundation for Apps 转移到我们的实验性游乐场，以专注于 Foundation for Sites”。