javascript - vue.js - 将 sass 样式从一个组件绑定(bind)到另一个组件

Question

这个问题是关于 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>

正确的做法是什么？

Answer 1

您可以导入 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>