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

Question

我正在尝试更改项目中的“主要”、“危险”、“信息”等主题颜色。我使用 bootstrap-vue。我试过更改 node_modules 中 bootstrap 文件夹中的 variables.sass 文件，但没有任何反射(reflect)。我看了一下 documentation对于主题化，但我似乎无法理解它，也不知道我应该做什么。他们的示例看起来与 CLI 4 的脚手架项目完全不同。我应该创建自定义 sass 文件、安装 sass 加载程序并导入它吗？

主要.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>

Answer 1

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

然后在 main.js 文件中导入 custom.scss 以及 bootstrap-vue

自定义.scss

$theme-colors: (
  "primary": black,
  "danger": blue
);

@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';

主.js

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 中自定义任何代码，因为这些文件应该能够被删除并重新下载而不会破坏任何东西。