Vuejs2 自定义vue引导主题不工作
我正在尝试使用vue引导,我想为我的主题设置自定义颜色,我还想让我的用户通过按钮切换到深色主题。我安装了vue bootstrap,工作正常。我按照bootstrap4中的说明来定制主题,因此在我的资产文件夹中创建了一个custom.scss文件,并添加了此代码Vuejs2 自定义vue引导主题不工作,vuejs2,bootstrap-4,Vuejs2,Bootstrap 4,我正在尝试使用vue引导,我想为我的主题设置自定义颜色,我还想让我的用户通过按钮切换到深色主题。我安装了vue bootstrap,工作正常。我按照bootstrap4中的说明来定制主题,因此在我的资产文件夹中创建了一个custom.scss文件,并添加了此代码 $theme-colors: ( "kimbel-prime": #091F40, "kimbel-success": #7FC343, "kimbel-warn": #C74241, "kimbel-d
$theme-colors: (
"kimbel-prime": #091F40,
"kimbel-success": #7FC343,
"kimbel-warn": #C74241,
"kimbel-danger": #6E0C2B
);
@import "node_modules/bootstrap/scss/bootstrap";
为了使用它,我在github网站上读到,你必须在app.vue中导入所有这些内容
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<b-button variant="kimbel-primary"> I am a Button </b-button>
</div>
<router-view/>
</div>
</template>
<style lang="scss">
@import "assets/custom.scss";
@import "~bootstrap/scss/bootstrap.scss";
@import '~bootstrap-vue/dist/bootstrap-vue.css';
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
家|
关于
我是一颗纽扣
@导入“assets/custom.scss”;
@导入“~bootstrap/scss/bootstrap.scss”;
@导入“~bootstrap vue/dist/bootstrap vue.css”;
#应用程序{
字体系列:“Avenir”、Helvetica、Arial、无衬线字体;
-webkit字体平滑:抗锯齿;
-moz osx字体平滑:灰度;
文本对齐:居中;
颜色:#2c3e50;
}
#导航{
填充:30px;
a{
字体大小:粗体;
颜色:#2c3e50;
&.路由器链路完全激活{
颜色:#42b983;
}
}
}
我添加了这个,并希望看到我的按钮得到新的颜色,但它仍然只有一个按钮的颜色,任何帮助都会被极大地吸引这是我第一次尝试使用vue,所以请原谅我错过的任何东西。我想我可以在完成这项工作后解决切换到黑暗主题的问题。我认为导入
.scss
文件的顺序是正确的matters@boussadjrabrahim那么在app.vue中,您认为我需要在样式
部分重新订购导入