Vue SFC добавляет глобальные переменные Sass ко всем компонентам

Question

Конфигурация моего веб-пакета. Я добавляю путь

 "mixins": path.resolve(
        __dirname,
        "resources/assets/sass/mixins/mixins.scss"
      ),

Это означает, что во всех моих отдельных файловых компонентах я использую

<style lang='scss' scoped>
    @import '~variables';

. Это прекрасно работает, но я нахожу этот файл.используется в 95% компонентов, поэтому импорт действительно не требуется.Я хочу, чтобы эти переменные были доступны везде.

Как я могу глобально добавить SASS к своим отдельным файловым компонентам без необходимости импорта в каждый файл?

Answer 1

Что ж, загрузите ваш обычный CSS из Webpack и сделайте его доступным для всех компонентов. Конфигурации Webpack приведены ниже.

sass-loader также поддерживает параметр данных, который позволяет вам совместно использовать общие переменные среди всех обработанных файлов без явного импорта их

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/_variables.scss";
          @import "@/scss/_mixins.scss";
        `
      }
    }
  }
};

Здесь указывается загрузчик sass под опцией loaderOptions. Точно так же весь код в этих файлах будет доступен в глобальной области видимости. Так что из любого компонента мы можем использовать его из коробки:

И теперь вы можете получить доступ к переменной в Vue SFC, не импортируя ее.

<style lang="scss">
.classroom {
  /* No need to import, it just works \o/ */
  background: $bg-classroom;
}
</style>

Ссылка Официальные документы здесь

Надеюсь, это поможет!