vue.js - 将 sass 样式从一个组件绑定到另一个组件答案

【问题标题】：vue.js - bind sass styling from one component to anothervue.js - 将 sass 样式从一个组件绑定到另一个组件
【发布时间】：2017-10-07 08:19:57
【问题描述】：

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

假设儿子只是一个简单的 div。

// son component
    <template>
        <div></div>
    </template>

    <style lang=sass scoped>
        div {
            width: 200px;
            height: 200px;
        }
    </style>

正确的做法是什么？

【问题讨论】：

标签： javascript css sass vue.js

【解决方案1】：

您可以导入 sass 并使用类似的绑定，

<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>

【讨论】：

不太明白......数组中的那些值在哪里声明为 sass 值？
您可以在样式标签中导入，然后您可以通过$style.classname var访问您的类，检查编辑并使用类绑定

【解决方案2】：

除了作用域样式之外，您还可以在同一组件中使用全局样式，这会暴露给子组件。只需向您的组件添加一个新的样式标签，而无需使用 scoped 键。

您的组件可能看起来像那样。

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

Source

【讨论】：