Как использовать стилус для доступа к переменным javascript в файле vue?
Например:
<script>
export default {
data() {
return{
varinjs: 1,
}
}
}
</script>
<style lang = "stylus">
varincss = varinjs
body
if varincss == 0
background-color red
else varincss == 1
background-color blue
</style>
Есть ли способ получить доступ к переменным javascript в css？ можно использовать sass или меньше, но я бы нравится стилус намного больше.
Ответы 2
Я знаю, что это не ответ на «этот» вопрос (я хотел прокомментировать), но я постараюсь предложить альтернативное решение.
Stylus поддерживает встроенную функцию json(path[, options]), что означает, что вы можете поместить все переменные в файл JSON и передать их как в файлы JS, так и в файлы Stylus.
Вы не можете получить доступ к переменной стилуса с помощью JS, и вы, вероятно, не сможете этого сделать, если не найдете какие-то библиотеки времени сборки, которые преобразуют указанный файл / переменную js в переменные стилуса.
Для этого вы можете использовать настраиваемые свойства CSS.
Свяжите с ними переменные стилуса и просто обрабатывайте изменения в JavaScript.
<script>
export default {
data () {
return {
theme: { background: '#ff0000' }
};
},
watch: {
'theme.background': { immediate: true, handler: 'applyVariables' }
},
methods: {
applyVariables () {
const scope = document.documentElement.styles;
scope['--theme-background'] = this.theme.background;
}
}
};
</script>
<style lang = "stylus">
theme-background = var(--theme-background, #ff054a);
// The first argument is variable name and second is placeholder value.
.theme-button
background-color: theme-background
</style>
Думаю, это очень хороший ответ. Он не дает прямого ответа на вопрос, но предлагает хорошее направление решения проблемы.