Препроцессор в vue cli 2

[fori]

Здраствуйте, для работы с анимированымы отступами мне неоходимо в scss и js использовать одинаковые значения, существует ли в vue cli аналог #define (только для компилятора) который просто подставит мои константы-переменные как в js так и scss
Структура компонента

<i18n>
//...
</i18n>
<template>
<!-- -->
</template>
<style lang="scss" scoped>
//...
</style>
<script>
//...
</script>

мне нужно чтоб такие переменные работали во всем компоненте во все тегах выше...

[Aetae]

Переменные или константы?

Если константы - можно красиво нашаманить: создаётся общий конффиг файл, который в 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).