如何将全局 scss 样式添加到 preact 应用程序

Question

我从默认的 preact-cli 模板创建了 preact 模板

添加：

"sass": "^1.45.1",
"sass-loader": "^10.2.0",

将全局 scss 文件导入 index.js 并且全局样式可以正常工作

import "./style/global.scss";
import App from "./components/app";
export default App;

添加到 global.scss 文件 mixin 和 scss vars：

@mixin br {
  border-radius: 12px;
}

当我尝试在某些组件中使用它时：

 .merchant {
    margin-bottom: 4px;
    @include br;
  }

我得到错误：

Module build failed (from ../node_modules/preact-cli/lib/lib/webpack/proxy-loader.js):

    @include br;
   ^
      Undefined mixin.
  ╷
6 │     @include br;
  │     ^^^^^^^^^^^
  ╵
  stdin 6:5  root stylesheet
      in ./src/components/header/style.scss (line 6, column 5)
 @ ./components/header/style.scss 2:12-238 9:17-24 13:7-14 45:20-27 47:4-60:5 49:6-59:7 50:38-45 56:26-33 58:21-28 68:15-22
 @ ./components/header/index.js
 @ ./components/app.js
 @ ./index.js
 @ ../node_modules/preact-cli/lib/lib/entry.js

看起来我需要像加载器这样的东西，我需要在哪里添加它？

Answer 1

如果要使用其中的任何内容，则需要导入 SCSS 文件。

@import 'path/to/global.scss';

.merchant {
    margin-bottom: 4px;
    @include br;
}

澄清一下，这是使用 SCSS 时的正常做法；变量和 mixins 不会作为全局变量添加到您的加载程序中（而且我从未见过它们所在的设置，所以我很好奇您是否遇到过这样的系统）。 SCSS 处理器将单独编译每个文件，因此如果没有导入，它将无法解析您的 mixin。