使用 SASS 进行电子锻造

Question

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

我尝试在第一个 TypeScript 类 app.tsx 中添加 style.scss 作为导入，但添加此编译后不再起作用：

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">

“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 页面上的文档中提供的内容，已正确实施到电子锻造中。 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

然后，在头部导入文件

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