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

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

Если вы используете проект, не основанный на 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.js
• Интерфейс командной строки Vue.js: узнайте, как его использовать
• Инструменты разработчика Vue.js
• Настройка VS Code для разработки Vue
• Создайте свое первое приложение с Vue.js
• Однофайловые компоненты Vue.js
• Шаблоны и интерполяции Vue.js
• Директивы Vue.js
• Методы Vue.js
• Вычисляемые свойства Vue.js
• Стилизация компонентов Vue.js с помощью CSS
• Наблюдатели Vue.js
• Методы Vue против наблюдателей против вычисляемых свойств
• Фильтры Vue.js
• Компоненты Vue.js
• Слоты Vue.js
• Свойства компонента Vue.js
• События Vue.js
• Связь компонентов Vue.js
• Vuex, государственный менеджер Vue.js
• Vue, используйте компонент внутри другого компонента
• Vue, как использовать опору в качестве имени класса
• Как использовать SCSS с однофайловыми компонентами Vue.js
• Использование Tailwind с Vue.js
• Маршрутизатор Vue
• Динамически отображать компонент Vue
• Шпаргалка по Vue.js
• Храните данные Vue в localStorage с помощью Vuex
• Как динамически применять класс с помощью Vue
• Vue, как использовать v-модель
• Vue, почему данные должны быть функцией
• Roadmap to become a Vue.js developer in 2020