Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Препроцессор в vue cli 2 (https://javascript.ru/forum/css-html/82198-preprocessor-v-vue-cli-2-a.html)

fori 30.03.2021 18:25

Препроцессор в vue cli 2
 
Здраствуйте, для работы с анимированымы отступами мне неоходимо в scss и js использовать одинаковые значения, существует ли в vue cli аналог #define (только для компилятора) который просто подставит мои константы-переменные как в js так и scss
Структура компонента
<i18n>
//...
</i18n>
<template>
<!-- -->
</template>
<style lang="scss" scoped>
//...
</style>
<script>
//...
</script>

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

Aetae 30.03.2021 22:58

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

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