Препроцессор в vue cli 2
Здраствуйте, для работы с анимированымы отступами мне неоходимо в scss и js использовать одинаковые значения, существует ли в vue cli аналог #define (только для компилятора) который просто подставит мои константы-переменные как в js так и scss
Структура компонента <i18n> //... </i18n> <template> <!-- --> </template> <style lang="scss" scoped> //... </style> <script> //... </script> мне нужно чтоб такие переменные работали во всем компоненте во все тегах выше... |
Переменные или константы?
Если константы - можно красиво нашаманить: создаётся общий конффиг файл, который в script и i18n подключается простым import, а для scss импортируется в vue.config.js и мапится валидные в scss-переменные(в строку), поле чего используется в css.loaderOptions.scss.additionalData. Альтернативно, чтобы везде в скриптах не импортировать, можно сделать конфиг глобальным через webpack.ProvidePligin\DefinePlugin. Если таки переменные, т.е. могут изменяться во время исполнения, то с scss у тебя не получится: scss - это препроцессор, scss код компилируется в обычный css и во время исполнения никаких переменных там уже нет. Тут тебе помогут css3-переменные(ie11 не умеет). Просто сделай твой конфиг объект реактивным(Vue.observable( object ) или просто помести в data), следи за его изменениями через watch deep и для изменившихся значений менял css3 переменные через document.documentElement.style.setProperty('--vaname', varvalue). |
Часовой пояс GMT +3, время: 18:10. |