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

Question

我正在尝试更改项目中的"primary"、"danger"、"info"等主题颜色。我使用bootstrap vue。我尝试过更改node_modules中引导文件夹中的variables.ass文件，但没有反映任何内容。我看了一眼关于主题的文档，但我似乎无法理解它，也不知道我应该做什么。他们的例子看起来一点也不像CLI4的脚手架项目。我应该创建一个自定义的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>

Answer 1

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

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

自定义.css

$theme-colors: (
"primary": black,
"danger": blue
);
@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';

main.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中的任何代码，因为这些文件应该能够被删除并重新下载，而不会破坏任何内容。