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
Share
Improve this question
edited May 21, 2020 at 14:22
Jahson
asked May 21, 2020 at 13:19
JahsonJahson
1392 silver badges15 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
1 Answer
Reset to default 8I 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
版权声明:本文标题:javascript - Vue is it possible to use a prop for styling? (SCSS SASS) - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742218223a2434959.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论