vue.js - 在 Vue 应用程序中导入全局 scss 样式以及单独的 mixin 和变量 scss 文件

Question

我正在使用 scss 构建 Vue 3 应用程序。我有 3 个样式表文件 - _mixins.scss、_variables.scss 和 base.scss。当我读到 here 时，我正在 vue.config.js 中导入 mixins 和变量文件。 ，因此我可以在所有其他组件中使用这些 mixin 和变量，而无需在所有组件中手动导入它们。

但是，我还有 base.scss 文件，我想在其中为我的网站提供全局样式(例如标题的通用样式等)。我不想在 vue.config.js 中导入此文件，因为这意味着该文件将重复包含在我的所有组件中。所以我尝试通过 @use "styles/base"; 将其导入到 App.vue 中，或者使用 import 在 main.js 中导入它“样式/base.scss”；。

不幸的是，在这两种情况下，Sass 编译器都会抛出此错误:

Syntax Error: SassError: @use rules must be written before any other rules.
  ╷
6 │ @use "styles/base";
  │ ^^^^^^^^^^^^^^^^^^
  ╵
  D:\PWND\pwnd_ui_poc_js\src\App.vue 6:1  root stylesheet

我真的不知道，我应该如何正确地做到这一点。为了完整起见，我包含了文件的基本结构:

// _variables.scss
$baseGreen: #24ff00;

// _mixins.scss
@forward "variables";

@mixin section-heading {
  color: $baseGreen;
}

// base.scss
@forward "mixins";
@forward "variables";

.section {
  color: $baseGreen;
  
  &-heading {
    @include section-heading();
  }
}

如果您有任何想法，我应该如何正确地执行此操作，我将非常感谢您的帮助。谢谢你! :)

Answer 1

我正在使用该配置来加载任何组件的全局变量:

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import '@/scss/_variables';`,
      }
    }
  },
}