vue.js - 將sass樣式從一個組件綁定到另一個組件

這個問題是關於vue.js的，它在使用webpack配置的樣板上運行。vue.js - 將sass樣式從一個組件綁定到另一個組件

我需要動態地將組件father的sass變量傳遞給組件son（爲了簡化命名）。

組件father我可以訪問樣式標記中的$color變量。和我使用這個HTML模板打電話來son組件：

// father component 
    <template> 
     <son></son> 
    </template> 
    <style lang='sass' scoped> 
     @import 'assets/sass/color'; 
    </style>

進口青菜變量，$color需要來自father和改變son

背景讓我們說兒子只是一個簡單的div。

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

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

什麼是正確的做法呢？

來源

2017-05-09 LiranC

你可以導入青菜和使用結合樣，

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

來源

2017-05-09 06:45:11 MehulJoshi

真的不明白......其中數組內的值被宣佈爲上海社會科學院值？ – LiranC

你可以導入樣式標籤，然後你可以通過'$ style.classname' var訪問你的類，檢查** edit **並使用類綁定 – MehulJoshi

除了你的作用域花式的，你也可以使用全局那些會暴露給子組件的相同組件。只需在組件中添加新的樣式標籤，而不使用scoped密鑰。

你的組件可能看起來像這樣。

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

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

Source

來源

2017-05-09 06:52:17 Aer0

vue.js - 將sass樣式從一個組件綁定到另一個組件

回答

相關問題