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

【问题标题】：Importing global scss style in Vue application together with separate mixin and variable scss files在 Vue 应用程序中导入全局 scss 样式以及单独的 mixin 和变量 scss 文件
【发布时间】：2021-03-02 11:26:03
【问题描述】：

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

但是，我也有 base.scss 文件，我想在其中为我的网站设置全局样式（例如标题的一般样式等）。我不想在vue.config.js 中导入此文件，因为这意味着该文件将重复包含在我的所有组件中。所以我尝试通过@use "styles/base"; 将其导入App.vue 或使用import "styles/base.scss"; 导入main.js。

不幸的是，在这两种情况下，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();
  }
}

如果您有任何想法，我应该如何正确地做到这一点，我非常感谢您的帮助。谢谢！ :)

【问题讨论】：

这不是最好的方法，但您可以尝试将@use 更改为标准@import。
@Daniel 谢谢，不知怎的，我在 App.vue 中使用 @import 并删除了 base.scss 中的两个 @forward。我很惊讶，即使我删除了两个@forwards，我也可以使用base.scss 中的变量。我想这是因为它是在 App.vue 中导入的，我可以从那里访问这些变量，因为我的 vue.config.js 配置。我仍然认为这不是理想的解决方案，但至少比将我的全局 scss 代码写入 App.vue 更好。如果您有任何其他改进的想法，我会很高兴听到它们。再次感谢您！ :)
我在vue.config.js中添加了我的配置答案

标签： vue.js sass

【解决方案1】：

我正在使用该配置为任何组件加载全局变量：

vue.config.js

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

【讨论】：

谢谢，但这并不能解决我的问题，因为我只想在vue.config.js 中拥有_variables.scss 和_mixins.scss 文件。主要问题是导入base.scss 文件，我不想在vue.config.js 中导入该文件，因为它会在我的所有组件中重复。