Electron Forge与SASS搭配使用

Question

我使用Electron Forge来制作Electron应用程序。我还利用React和TypeScript，也想使用SASS，但我的尝试失败了。 显然，SASS已经可以正常工作，而不需要在package.json中添加任何新的依赖项，因为electron-compile会负责这个。这就是在Develop下的electronforge.io网站上所说的。

我尝试将style.scss作为第一个TypeScript类app.tsx中的导入添加，但添加后编译不能正常工作。

import "./style/style.scss";

导致：

[24717:0221/194746.779571:ERROR:CONSOLE(7830)] "Extension server error: Object not found: <top>", source: chrome-devtools://devtools/bundled/shell.js (7830)

我也尝试将一个link元素放入index.html中的head元素中，但这并没有起作用。编译能成功，但CSS样式没有被应用：

<link rel="stylesheet" href="style/style.scss">

我也尝试过：

<link rel="stylesheet" type="text/css" href="style/style.scss">

并且：

<link rel="stylesheet" type="text/scss" href="style/style.scss">

并且：

<link rel="stylesheet" type="text/sass" href="style/style.scss">

body {
    background-color: #ff0000;
    color: #0000ff;
}

但是它们都无法正常工作。我该怎么做才能在Electron Forge中使用SASS文件？

- Socrates

Answer 1

我已经成功地让它工作了，虽然有点晚，但希望这能帮助未来的某个人。在一个使用webpack的示例应用程序上（我非常确定这是必需的），Electron Forge在根目录中为webpack配置生成一些js文件。

yarn create electron-app my-new-app --template=webpack

或者

yarn create electron-app my-new-app --template=typescript,webpack

https://www.electronforge.io/templates/typescript-+-webpack-template

接下来，在项目根目录中有两个文件：webpack.rules.js和webpack.plugins.main.config.js。这些需要进行修改以正常工作，并且您需要安装sass-loader作为开发依赖项。由于node-sass最近被弃用，因此sass-loader可以很好地处理它。

您的webpack.plugins.main.config.js文件应包括：

module: {
  rules: require("./webpack.rules"),
},
resolve: {
  extensions: [
    ".js",
    ".ts",
    ".jsx",
    ".tsx",
    ".css",
    ".json",
    ".scss",
    ".sass",
  ],
},

此外，你的 webpack.rules.js 文件应该添加一个新的规则：

{
  test: /\.s[ac]ss$/i,
  use: [
    // Creates `style` nodes from JS strings
    "style-loader",
    // Translates CSS into CommonJS
    "css-loader",
    // Compiles Sass to CSS
    "sass-loader",
  ],
},

这是在 sass-loader 页面文档中提供的内容，已经在 electron forge 中进行了正确实现。https://www.npmjs.com/package/sass-loader 最后，您的 renderer.js 文件（或 renderer.js）应该适应导入 scss 文件而不是 css 文件。

import './index.scss';

从那里开始，你就可以开始了！

- summerysaturn

---

按照这种方法，当我尝试编译时会出现错误：SassError: expected "{".，它指的是 import API from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";。 - SimpleProgrammer

我看到了与@SimpleProgrammer相同的行为。 - Aaron Cunnington

Answer 2

你需要编译SASS文件以生成CSS文件，然后将其放入index.html中。 你可以使用控制台进行尝试。

# Path to SASS File > OUTPUT path to CSS File
sass style/sass/style.scss style/style.css

然后，在头部导入文件。

<link rel="stylesheet" href="style/style.css">

- Daniel M Sánchez

---

好的，这个可以工作，但是它不太美观，因为我每次在启动应用程序之前都必须手动执行这个操作。 - Socrates

使用以下命令 sass style/sass/style.scss style/style.css -w 可以让文件被持续监视。 - Daniel M Sánchez

好的，这可能作为一种解决方法。虽然它需要打开两个终端。一个用于 npx sass --watch --no-source-map src/style/style.scss src/style/style.css，另一个用于 yarn start。 - Socrates

此外，使用这种方法，Electron Forge 不会跟踪 CSS 或 SCSS。因此，当更改时不会自动重新加载。 - Socrates

Electron 目前尚未实现 SASS :/ 参考链接 - Daniel M Sánchez

当使用Webpack时，SASS在Electron中可以无问题地工作。DevDependencies：node-sass和sass-loader。在webpack.config.js中将sass-loader添加为模块规则。但是在这里，我正在尝试在Electron Forge中使用SASS，而在那里没有访问任何Webpack配置。 - Socrates