Vue и Sass - Создание и подключение к проекту базового файла стилей и файла с переменными scss

Стили приложения, которые должны быть подключены ко всем страницам, могут быть загружены в главный конфигурационный файл Vue.js.

Сперва создадим файл с именем vue.config.js в корне проекта на том же уровне, что и package.json. В нем мы собираемся определить некоторые параметры конфигурации. Вы можете прочитать больше об этом файле здесь.

Внутри него мы добавим оператор импорта:

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

Если же вы используете TypeScript, и в проекте имеется файл src/main.ts, то подключить стили можно в этом файле:

import "@/assets/scss/main.scss";

Теперь, в папке src/assets создадим папку scss, в ней два файла: main.scss и _variables.scss (по соглашению о присвоении имён SASS, в названии файла, содержащего переменные, используем символ нижнего подчёркивания _, но это не обязательно).

В файле _variables.scss будем держать переменные для стилей:

$primary: purple;

Теперь, в любом компоненте, в блоке со стилями, а также в других scss-файлах мы можем использовать эти переменные:

#app {
  color: $primary;
}