Electron Forge 与 SASS

Question

我使用 Electron Forge 作为 Electron 应用程序。我还使用 React 和 TypeScript，我也想使用 SASS，但我目前的尝试失败了。显然 SASS 已经可以工作，无需添加任何新的依赖项package.json，aselectron-compile就可以解决这个问题。这就是Electronforge.io上Develop下的内容。

我尝试在第一个 TypeScript 类中添加style.scss作为导入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元素放入head中的元素中index.html，但这也不起作用。编译工作正常，但 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">

“style.scss”文件：

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

但它们都不起作用。我必须做什么才能在 Electron Forge 中使用 SASS 文件？

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';

从那里，你应该可以开始了！

Answer 2

需要编译SASS文件生成一个CSS文件然后放到index.html 哟可以用控制台试试

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

然后，导入head中的文件

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