Почему переменная scss в компоненте vue — undefined?
Созданы два файла scss, в первом файле импортированы переменные из второго, файл style.scss импортирован в main.js. Но если я в компоненте объявляю переменную, компилятор пишет, что она не обнаружена:
SassError: Undefined variable: "$margin".
Если же эту переменную использую в style.scss - все работает. В чем может быть проблема? Стили внутри компонента не инкапсулированы.
Переменные не нужно объявлять в компонентах (только если локальные, чисто для этого компонента)
Их нужно вынести в отдельный файл и подключить этот файл глобально, через конфиг webpack
PS/ Код конфига в том моем ответе возможно устарел. Уточните имена опций в документации sass-loader.