Nikita Velko

Обычный хороший подход, даже правильный я бы сказал. Сам давно использую. И это действительно удобно, что можно в одном месте просмотреть все стили элемента по всем брейкпоинтам. В чем вопрос только непонятно. :)
Особенно удобно в сочетании с бутстрапом:

.logo {
  width: 198px;
  height: 122px;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  @include media-breakpoint-down(sm) {
    display: none;
  }
}

Попробуйте так:

{
  test: /\.vue$/,
  loader: 'vue-loader',
},
{
  test: /\.scss$/,
  loaders: [ "style-loader", "css-loader", "sass-loader" ]
},

И потом импорт стилей в компонент:

<style lang="scss">
  @import "./main";
</style>

Мой совет, используйте vue-cli, если вы ещё не.