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

Posted 2023-02-22

【中文标题】Sass / Vue：“@use 规则必须在任何其他规则之前编写”

【英文标题】：Sass / Vue: "@use rules must be written before any other rules"

【发布时间】：2020-12-08 04:58:28

【问题描述】：

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

【参考方案1】：

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

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