Блог

Пытаясь импортировать «sass: colors» в мою таблицу стилей colors.scss, я получаю SassError: «правила @use должны быть написаны перед любыми другими правилами», хотя это первая строка моего файла. Я подозреваю, что строка обрабатывается Vue с опозданием после какой-то компиляции Sass.

В моем корневом каталоге находится мой vue.config.js где у меня есть

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

Затем в src / styles / у меня есть colors.scss и overrides.scss, где я импортирую цвета в overrides. Наконец, у меня также есть src / plugins /vuetify.ts, куда я импортирую цвета (после Vue и Vuetify) для использования в пользовательской теме.

Есть идеи, как правильно импортировать модуль sass: colors, чтобы избежать ошибки SassError?

SassError: «правила @use должны быть написаны перед любыми другими правилами», поэтому измените свои первые правила на @use

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