Как подключить свой scss фреймворк к Vue.js?

Question

[SirAlejandro]

Такой вопрос. Есть scss фреймворк (Файл с миксинами для сетки, файл с функциями, файл с переменными, файл сброса стилей, и т.п., подключенные к одному app.scss).
Как можно подключить этот app.scss чтобы во всех компонентах Vue иметь доступ к любым миксинам, переменным и т.п.?
Если подключать в корневом компоненте App.vue дочерние компоненты все равно не видят этих миксинов((

Comments

[sim3x]

Зачем?

[SirAlejandro]

Ну верстку то никто во вью не отменял. А для нее у меня есть своя сетка с брейкпоинтами и миксинами. В переменных общие цвета и шрифты для приложения, чтобы потом не носится по всем компонентам и не исправлять в случае каких-либо изменений в дизайне. Ну и так далее

[sim3x]

SirAlejandro, ну так и зачем связывать сасс с вью?
Если нужно связывать верстку с бем компонентами и вью?

[SirAlejandro]

Просто я работаю с отдельными компонентами .vue В каждом компоненте верстаю template шаблон, и в нем же, в style его оформляю (не отдельный css файл а именно внутри компонента) Хотелось бы иметь доступ к своим библиотекам миксинов чтобы ускорить процесс. Пока нашел решение, импортируя в каждый компонент свои файлы.
Наверное... это единственный вариант

[sim3x]

SirAlejandro, неважно как оформляете

Вам не избежать процессинга сасс в цсс
Потому сначала делаем хтмл, потом на него делаем сасс и собираем цсс, потом пилим динамику на жс

А для продакшена собираем цсс и жс в кучу

Answer 1

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

Все "глобальные" стили (то есть уже готовые классы) импортируем в 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 (удобно)