Vue可以使用道具進行造型嗎？ (SCSS/SASS)

Question

我目前正在嘗試允許對使用引導程序的組件進行自定義主題化。 我想在 Vue 組件部分的 SCSS 中設置其 $primary 標記，例如，目前我的樣式如下所示：

<style scoped lang="scss">
$primary: #FF1493;
// Bootstrap and its default variables
@import "../../node_modules/bootstrap/scss/bootstrap";
// BootstrapVue and its default variables
@import "../../node_modules/bootstrap-vue/src/index.scss";

@import "src/assets/custom.scss";
</style>

所以我正在尋找一種方法來根據組件收到的道具來定制十六進制代碼。 謝謝你的幫助。

從評論輸入后編輯，這是嘗試但沒有工作：

<template>
 <div style="style="{ '--test': #ff1493 }"">
 </div>
</template>

<style scoped lang="scss">
$primary: var(--test);
// Bootstrap and its default variables
@import "../../node_modules/bootstrap/scss/bootstrap";
// BootstrapVue and its default variables
@import "../../node_modules/bootstrap-vue/src/index.scss";

@import "src/assets/custom.scss";
</style>

雖然在 SCSS 中導致以下編譯錯誤：

SassError: argument `$color` of `darken($color, $amount)` must be a color
        on line 181 of node_modules/bootstrap/scss/_variables.scss, in function `darken`
        from line 181 of node_modules/bootstrap/scss/_variables.scss
        from line 9 of node_modules/bootstrap/scss/bootstrap.scss
        from line 201 of D:\Documents\Code\SiliconGit\src\components\SiDialog.vue

Answer 1

我嘗試了Emad Ahmed的答案，對我來說效果很好。
我的組件看起來像；

<template>
    <div id="a" :style="cssVars">
        <p>Hello there</p>
    </div>
</template>

<script>
    export default {
        name: "css-change",
        props: {
            init_color: {
                required: false,
                type: String,
                default: '#ff0000'
            }
        },
        data() {
            return {
                color: this.init_color
            }
        },
        computed: {
            cssVars () {
                return{
                    /* variables you want to pass to css */
                    '--color': this.color,
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
#a{
    background-color: var(--color);
}
</style>

我正在從我的 package.json 導入引導程序； "bootstrap": "4.4.1"