Использование SCSS/SASS для стилей в вашем проекте, несомненно, сэкономит много времени на разработку стилей. Вот три варианта использования SCSS/SASS в vue-cli v3.0. Предпосылка заключается в том, что CSS Pre-processors (препроцессоры CSS) проверяются при использовании vue-cli для генерации проекта, иначе его нельзя использовать непосредственно в проекте.
Вариант 1: использовать его непосредственно в компоненте
Проще всего использовать SCSS/SASS непосредственно в компоненте:
<style lang="scss" scoped>
</style>
Используемый синтаксис можно выбрать с помощью опции lang: scss/sass. Удалите область, если вы хотите, чтобы стиль действовал глобально.
Вариант 2. Импорт файла .scss в компонент
Иногда мы можем захотеть определить общий scss/sass Мы можем создать файл .scss в каталоге проекта, например, некоторые общие стили, которые мы хотим использовать только в определенном компоненте или некоторых переменных scss и т. д.
Мы можем использовать @import в компоненте для импорта стилей, например:
@import '../src/static/common.scss';
Будьте осторожны, чтобы не написать неправильный путь. И предпосылкой этой схемы является использование в компоненте импортаВариант первый. В противном случае .scss не может быть скомпилирован непосредственно в обычной таблице стилей css, и формат таблицы стилей должен быть единым.
Вариант 3. Используйте глобальный файл scss/sass.
Если вы хотите определить стили scss, которые можно использовать глобально, вам сначала нужно создать файл .scss, а затем использовать команду импорта в файле main.js проекта, чтобы глобально импортировать независимый файл .scss в проект, как при импорте модулей. .
import "./static/common.scss";
Пишите в конце, вести блог не просто, если этот блог вам полезен, ставьте пожалуйста лайки. Ваша оценка - моя самая большая мотивация.