SASS电子锻造

Question

我用电子锻造做一个电子应用程序。我还使用了React和TypeScript，我也想使用SASS，但是我目前的尝试失败了。很明显，SASS已经在没有向package.json中添加任何新的依赖项的情况下工作了，因为electron-compile会处理这个问题。这就是它在正在开发的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">

'style.scss`文件：

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

但它们都不管用。我应该怎么做才能利用电子伪造中的SASS文件？

Answer 1

我已经成功的工作了，有点晚，但希望这对未来的人有所帮助。在使用webpack的示例应用程序中(我非常肯定这是必需的)，电子Forge在根目录中为webpack config生成一些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作为一个dev依赖项来安装。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中，Yo可以使用控制台进行尝试。

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

然后，将文件导入头部。

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