这个问题是关于 vue.js 的,它在使用 webpack 配置的样板文件上运行。
我需要将 sass 变量从组件 father
动态传递给组件 son
(为了命名的简单性)。
在组件 father
上,我可以从样式标签访问 $color
变量。
我正在使用此 html 模板调用 son
组件:
// father component
<template>
<son></son>
</template>
<style lang='sass' scoped>
@import 'assets/sass/color';
</style>
导入sass变量,$color
需要来自father
,改变son
的背景
假设 son 只是一个简单的 div。
// son component
<template>
<div></div>
</template>
<style lang=sass scoped>
div {
width: 200px;
height: 200px;
}
</style>
正确的做法是什么?
最佳答案
您可以导入 sass 并使用绑定(bind),例如,
<p v-bind:style="[baseStyles, overrideStyles]">
baseStyles and overrideStyles
</p>
编辑
或者你可以做类似的事情
<template>
<div v-bind:class="$style.my_component">Hello</div>
</template>
<style module>
.my_component {
color: purple; // still the best color ever
}
</style>
关于javascript - vue.js - 将 sass 样式从一个组件绑定(bind)到另一个组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43862743/