javascript - Vue is it possible to use a prop for styling? (SCSS SASS) - Stack Overflow

admin管理员组

文章数量:1327692

I am currently trying to allow for custom themeing of my ponent which uses bootstrap. I want to set its $primary tag in SCSS inside the section of the Vue ponent for example currently my style looks like this:

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

So I am looking for a way to have that hex code be customizable based on a prop the ponent recieves. Thanks for your help.

Edit after input from a ment this was attempted and did not work:

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

Though leads the the following pile error in the 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\ponents\SiDialog.vue

I am currently trying to allow for custom themeing of my ponent which uses bootstrap. I want to set its $primary tag in SCSS inside the section of the Vue ponent for example currently my style looks like this:

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

So I am looking for a way to have that hex code be customizable based on a prop the ponent recieves. Thanks for your help.

Edit after input from a ment this was attempted and did not work:

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

Though leads the the following pile error in the 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\ponents\SiDialog.vue

• javascript
• css
• vue.js
• sass
• bootstrap-4

Share Improve this question Follow edited May 21, 2020 at 14:22 Jahson asked May 21, 2020 at 13:19 JahsonJahson 13922 silver badges1515 bronze badges 3

• Checkout the answer by Emad Ahmed here stackoverflow./questions/42872002/… – Rooneyl Commented May 21, 2020 at 14:02
• @Rooneyl Thanks for heads up I have actually tried that solution before I updated the question with what I found. – Jahson Commented May 21, 2020 at 14:22
• I tried and it worked fine for me, I've posted a copy of mu ponent I used. Try that and let me know – Rooneyl Commented May 22, 2020 at 9:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

I tried the answer from Emad Ahmed, and it worked fine for me.
My ponent looks like;

<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
            }
        },
        puted: {
            cssVars () {
                return{
                    /* variables you want to pass to css */
                    '--color': this.color,
                }
            }
        }
    }
</script>

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

I am getting bootstrap imported from my package.json; "bootstrap": "4.4.1"

本文标签： javascriptVue is it possible to use a prop for styling (SCSS SASS)Stack Overflow