在Vue CLI 3项目中使用自定义Bootstrap SASS的步骤是什么？

Question

我正在尝试更改项目中的“主要”，“危险”，“信息”等主题颜色。我使用bootstrap-vue。我试过更改node_modules的bootstrap文件夹中的variables.sass文件，但没有任何反应。我看了一下documentation的主题设置，但似乎无法理解它，也不清楚我应该做什么。他们的示例与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')
App.vue

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

我正在尝试更改项目中的“主要”，“危险”，“信息”等主题颜色。我使用bootstrap-vue。我试过更改node_modules的bootstrap文件夹中的variables.sass文件，但...

Answer 1

如果您使用vue-cli 3/4创建了项目，则可以执行以下操作。创建一个custom.scss文件，并在其中导入bootstrap和bootstrap-vue样式，并在导入之前自定义变量。