actualmente estoy tratando de anular algunos estilos vue-bootstrap, tengo mi propio archivo scss personalizado importando mi bootstrap y bootstrap vue scss, y lo estoy usando dentro de main.js, aunque mi sass se compila, no veo ningún cambio en mi servidor dev y estoy perdido
main.scss (mi archivo) -> tratando de cambiar la variable principal a un color diferente
//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 (incluida la importación de sass aquí, también por alguna razón si no configuro lang=scss aparece un error donde el paquete web no puede leer los comentarios de sass y arroja un error de palabra desconocida)
<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 (incluí todo en el archivo solo porque no sé si el orden es importante)
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')He estado en esto por un tiempo, así que intentaré dar una historia de lo que he intentado.
He intentado editar la variable $primaria en node_modules\bootstrap\scss_variables.scss He intentado editar la variable $primaria en node_modules\bootstrap-vue\node_modules\bootstrap\scss_variables.scss
También intenté cambiar el color directamente, intenté eliminar el modificador predeterminado.
versiones bootstrap 4.6.0 sass-loader es 10.2.0
Estoy pensando que mi main.scss necesita especificar de alguna manera si está editando la variable $primary en bootstrap o en bootstrap-vue... No estoy seguro de cómo puedo hacer esto. esperando que alguien tenga alguna idea
muchas gracias :)
Todavía está incluyendo los archivos .css base de Bootstrap y BootstrapVue. Entonces sobrescribirán cualquier cosa que defina en su SCSS.
Así que elimine esas dos importaciones de su main.js y debería funcionar.
// remove these from main.js import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' También tiene este Vue.use(styles) que no tiene sentido, ya que solo debe usar Vue.use en los complementos de vue, por lo que también debe eliminarlo. Lo que significa que puede cambiar su importación para import '../sass/main.scss';
Ya sea que importe main.scss en main.js o App.vue , depende de usted. Pero solo debes tener uno u otro, no ambos.