我正在尝试更改项目中的“主要”,“危险”,“信息”等主题颜色。我使用boots-vue。我试过更改node_modules的bootstrap文件夹中的variables.sass文件,但没有任何反应。我看了有关主题的文档,但似乎无法理解它,也不了解应该怎么做。他们的示例看起来与CLI 4的脚手架项目完全不同。我是否应该创建一个自定义sass文件,安装sass加载程序并导入它?
main.js
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import './assets/main.css';
import routes from './routes';
Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.use(BootstrapVue);
const router = new VueRouter({mode: 'history',routes});
new Vue({
router,
render: h => h(App)
}).$mount('#app')
查看应用
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
}
</script>
<style lang="css">
@import 'assets/main.css';
@import 'assets/custom_scss.scss';
</style>
如果您使用vue-cli 3/4创建了项目,则可以执行以下操作。创建一个custom.scss
文件,然后在其中导入bootstrap和bootstrap-vue样式,并在导入之前自定义变量。
然后导入custom.scss
您的main.js
文件,引导-VUE沿
$theme-colors: (
"primary": black,
"danger": blue
);
@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';
import Vue from "vue";
import BootstrapVue from "bootstrap-vue";
import "../assets/scss/custom.scss";
Vue.use(BootstrapVue);
new Vue({
render: h => h(App)
}).$mount("#app");
另一个要注意的是,您永远不要在其中自定义任何代码,node_modules
因为这些文件应该可以删除并重新下载而不会破坏任何内容。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句