Почему переменная scss в компоненте vue — undefined?

Question

[reinmaker90]

Созданы два файла scss, в первом файле импортированы переменные из второго, файл style.scss импортирован в main.js. Но если я в компоненте объявляю переменную, компилятор пишет, что она не обнаружена:

SassError: Undefined variable: "$margin".

Если же эту переменную использую в style.scss - все работает. В чем может быть проблема? Стили внутри компонента не инкапсулированы.

Answer 1

[Сергей delphinpro]

Вот здесь гляньте VueJS: где лучше хранить css, в компонентах .vue или main.css?

Переменные не нужно объявлять в компонентах (только если локальные, чисто для этого компонента)
Их нужно вынести в отдельный файл и подключить этот файл глобально, через конфиг webpack

PS/ Код конфига в том моем ответе возможно устарел. Уточните имена опций в документации sass-loader.

Comments

[reinmaker90]

Сергей delphinpro спасибо!