时间戳

首页 > 解决方案 > Sass / Vue：“@use 规则必须在任何其他规则之前编写”

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

问题描述

尝试将 "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 吗？

标签： vue.jssassvuetify.js

解决方案

SassError：“@use 规则必须在任何其他规则之前编写”，因此将您的第一个规则更改为 @use

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

推荐阅读