Как использовать SCSS с однофайловыми компонентами Vue.js

Узнайте, как включить SCSS в компоненты Vue.js

С использованиемVue CLIвы можете включить «Препроцессоры CSS» и выбрать, какой из них включить:

Vue CLI

Если вы используете проект, не основанный на Vue CLI, или проект, который был инициализирован с помощью Vue CLI, но вы не добавили поддержку препроцессора CSS, вы можете добавить его позже, используя:

npm install --save-dev node-sass sass-loader

Внутри компонентов вашего приложения вы можете использовать

<style lang="scss">
...
</style>

и добавьте туда свой код SCSS.

Если вы хотите сохранить код SCSS во внешнем файле, вы можете сделать это и просто импортировать его в часть сценария вашего компонента:

<script>
import '../public/style.scss'

//… </script>

Скачать мою бесплатнуюСправочник по Vue


Больше руководств по vue: