Андрей Хохлов

Все "глобальные" стили (то есть уже готовые классы) импортируем в App.vue

App.vue

<style lang="scss" type="text/scss">
  @import "./styles/app.scss";
</style>

Проблема с глобальным доступом к переменным и миксинам решается либо импортом их в каждый vue-компонент (неудобно).
Либо loader'ом для webpack: https://www.npmjs.com/package/sass-resources-loader (удобно)

Susy?

Поправить переменные

$grid-breakpoints: (
  xs: 0,
  sm: 768px,
  md: 980px,
  lg: 1200px
) !default;

$container-max-widths: (
  xs: 480px,
  sm: 720px,
  md: 960px,
  lg: 1140px
) !default;

Никак, sass же не обрабатывается в браузере, а компилируется в css.

А вот так например задается ширина контейнера в Bootstrap 4 в зависимости от breakpoint'ов


Откройте исходники на гитхабе и изучите.

Посмотрите на Bootstrap 4 (думаю в авторитетности этих парней сомневаться не приходится)

Есть n файлов вида _filename.scss
Эти файлы не компилируются сами по себе.

Есть n файлов вида filename.scss, которые компилируются в /some/path/filename.css
В этих файлах мы @import нужные нам модули.

Bootstrap предлагает собрать как полный набор стилей (bootstrap.scss), так и только сетку (bootstrap-grid.scss)

На всё это один watcher и один поток.

Оотдельный css для отдельной странице - зло. Выигрыша никакого, проблем много. Погуглите на эту тему.
Меня бы backend'еры побили бы за такое :(

Пишите в разных .sass файлах (это в любой ситуации будет правильно) и собирайте из них сколько угодно разных css.