如何添加全局scss样式来预演应用程序

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中：

@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文件中使用任何内容，则需要导入SCSS文件。

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

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

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