Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.03.2021, 18:25
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

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

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

Последний раз редактировалось fori, 30.03.2021 в 18:28.
Ответить с цитированием
  #2 (permalink)  
Старый 30.03.2021, 22:58
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
this.data не работает в vue cli fori Javascript под браузер 10 28.03.2021 21:17
Как в проект vue cli добавить скрипт (в файле) fori Javascript под браузер 0 27.03.2021 18:23
vue cli, как маштабировать размер компонента под каждую страницу fori Javascript под браузер 2 24.03.2021 22:33
что такое defineComponent (vue cli) fori Javascript под браузер 1 22.03.2021 20:46
"indent": в табы vue cli fori Оффтопик 0 18.03.2021 01:22