Sass / Vue：“@use 规则必须在任何其他规则之前编写”

Question

尝试将“sass:colors”导入到我的colors.scss 样式表中，我得到SassError：“@use rules must be write before any other rules”，即使它是我文件的第一行。我怀疑在某种 Sass 编译之后，Vue 会延迟处理该行。

在我的根目录中是我的 vue.config.js

module.exports = {
  ...
  css: {
    loaderOptions: {
      scss: {
        prependData: `
          @import "~@/styles/colors.scss";
          @import "~@/styles/overrides.scss";
        `,
      },
    },
  },
  ...
}

然后在 src/styles/ 我有 colors.scss 和 overrides.scss 我将颜色导入覆盖。最后，我还有 src/plugins/vuetify.ts，我在其中导入颜色（在 Vue 和 Vuetify 之后）以在自定义主题中使用。

知道如何正确导入 sass:colors 模块以避免 SassError 吗？

Answer 1

SassError: "@use 规则必须在任何其他规则之前编写"，所以将你的第一个规则更改为 @use

module.exports = {
  ...
  css: {
    loaderOptions: {
      scss: {
        additionalData: `
          @use "@/styles/colors.scss" as *;
          @use "@/styles/overrides.scss" as *;
        `,
      },
    },
  },
  ...
}