BootstrapVue 응용 프로그램에서 Bootstrap 기본 스타일 재정의:

by

스타일링에 Bootstrap-Vue를 사용하는 새로운 Vue 애플리케이션을 생성했는데 현재 Bootstrap의 기본 스타일을 재정의하려고 하는 문제에 직면해 있습니다.

오류 메시지: [sass] 변수가 정의되지 않았습니다.

11 │ $b-custom-control-indicator-size-lg: $custom-control-indicator-size * 1.25 !default;
│



^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
node_modules/bootstrap-vue/src/_variables.scss 11:38
@import node_modules/bootstrap-vue/src/index.scss 7:9
@import src/app.scss 7:9



root stylesheet

재현 순서:

  1. 새로운 Vue 앱을 만들었습니다.npm create vue@2, Typescript 미사용
  2. Bootstrap 및 BS-Vue 설치 완료npm install bootstrap bootstrap-vue
  3. sass & sass-loader 추가:npm add -D sass sass-loader
  4. https://bootstrap-vue.org/docs에 있는 이 매뉴얼에 기재되어 있는 절차를 따릅니다.

app.scss: /src에 배치됨

// Define variable defaults $body-bg: #000; $body-color: #111;
// Then import Bootstrap and BootstrapVue SCSS files (order is important) @import 'node_modules/bootstrap/scss/bootstrap.scss'; @import 'node_modules/bootstrap-vue/src/index.scss';

main.filename:

import Vue from "vue"; import App from "./App.vue"; import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import "./assets/main.css"; import "bootstrap/dist/css/bootstrap.css"; import "bootstrap-vue/dist/bootstrap-vue.css";
import './app.scss'
Vue.use(BootstrapVue); Vue.use(IconsPlugin);
new Vue({
router,
render: (h) => h(App), }).$mount("#app");


질문에 대한 답변



업데이트: 이 오류가 발생한 이유는 잘못된 버전의 부트스트랩을 사용하고 있었기 때문입니다.4개가 아닌 5개의 부트스트랩을 사용하고 있었다.

이것이 미래에 다른 누군가에게 도움이 되기를 바랍니다!