3

我将 Electron Forge 用于 Electron 应用程序。我也使用 React 和 TypeScript，我也想使用 SASS，但我目前的尝试失败了。显然，SASS 已经在没有向 . 添加任何新依赖项的情况下工作package.json，因为electron-compile它负责处理。这就是它在electronforge.io上的Develop下所说的。

我尝试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元素放入 中的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 文件？

4

2 回答 2

4

我已经设法让这个工作，有点晚了，但希望这对未来的人有所帮助。在使用 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，正确实施到电子锻造中。https://www.npmjs.com/package/sass-loader

最后，您的 renderer.js（或 renderer.js）应该适合导入 scss 文件而不是 css 文件。

import './index.scss';

从那里开始，你应该很高兴！

于 2020-12-27T05:06:45.717 回答
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">
于 2019-02-21T19:06:03.917 回答