时间戳

首页 > 解决方案 > bootstrap vue custom sass 编译但不改变变量

javascript - bootstrap vue custom sass 编译但不改变变量

问题描述

目前我正在尝试覆盖一些 vue-bootstrap 样式，我有自己的自定义 scss 文件导入我的 bootstrap 和 bootstrap vue scss，并且我在 main.js 中使用它，即使我的 sass 编译我没有看到任何变化我的开发服务器，我不知所措

main.scss（我的文件）-> 尝试将主变量更改为不同的颜色

//custom sass
$primary: #0dcaf0;

//bootstrap sass import
@import '../node_modules/bootstrap/scss/bootstrap';
// BootstrapVue and its default variables
@import '../node_modules/bootstrap-vue/src/index.scss';

App.vue（包括这里的 sass 导入，同样由于某种原因，如果我没有设置 lang=scss，我会收到一个错误，即 webpack 无法读取 sass 注释并抛出一个未知单词错误）

<style lang="scss">
@import '../sass/main.scss';

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

</style>

main.js（我将所有内容都包含在文件中只是因为我不知道顺序是否重要）

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free/js/all.js'
import {BootstrapVue, IconsPlugin} from 'bootstrap-vue'
import styles from '../sass/main.scss';

Vue.config.productionTip = false
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.use(styles)

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

我已经有一段时间了，所以我会尝试给出我尝试过的历史

我尝试在 node_modules\bootstrap\scss_variables.scss 中编辑 $primary 变量 我尝试在 node_modules\bootstrap-vue\node_modules\bootstrap\scss_variables.scss 中编辑 $primary 变量

我也试过直接改变颜色，我试过删除 !default 修饰符

版本引导程序 4.6.0 sass-loader 是 10.2.0

我在想我的 main.scss 需要以某种方式指定是否在 bootstrap 或 bootstrap-vue 中编辑 $primary 变量......我不确定我该怎么做？希望有人有一些见识

非常感谢 ：）

标签： javascriptvue.jssass

解决方案

您仍然包含.css来自 Bootstrap 和 BootstrapVue 的基本文件。因此它们会覆盖您在 SCSS 中定义的任何内容。

因此，从您的中删除这两个导入main.js，它应该可以工作。

// remove these from main.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

你也有这个Vue.use(styles)没有意义，因为你应该只Vue.use在 vue 插件上使用，所以你也应该删除它。这意味着您可以将导入更改为import '../sass/main.scss';

main.scss无论您是进口main.js还是App.vue取决于您。但是你应该只拥有一个或另一个，而不是两者兼而有之。

推荐阅读