Как во Vue 3 переопределять стили Bootstrap 5?

Question

[Black_Fire]

Если применять этот код

<style lang="scss">
  .custom-btn {
    background: red;
  }
</style>

,
то стили не применяются, если я прописываю этот класс в кнопке в template. Срабатывает только с !important, но это не вариант. Есть вариант как это переопределять?

Comments

[Aleksey]

Вообще бутстрап позволяет из коробки стили переопределять. Переменные у них !default помечены и прочее. Гуглите в ту сторону. Вам же фреймворк должен помогать. Не нужно с ним бороться.

[iBird Rose]

слишком мало данных. как подключается Bootstrap? где он подключается (в каком файле)? где ты пишешь свой приведенный код (в каком файле)?

[Black_Fire]

iBird Rose, подключение Bootstrap в main.js

import { createApp } from 'vue';
import App from './App.vue';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import './assets/styles.scss';

createApp(App).mount('#app');

Код компонента:

<template lang="">
  <div class="wrapper">
    <button
      type="button"
      class="btn btn-primary custom-btn"
      data-bs-toggle="modal"
      data-bs-target="#exampleModal"
    >
      Launch demo modal
    </button>

    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Close
            </button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
  .custom {
    &-button {
      background: red;
    }
  }
</style>

в package.json всё есть

"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-vue": "^7.13.0",
    "sass": "^1.36.0",
    "sass-loader": "^7.1.0"
  }

Answer 1

[Alex]

Ну, так вы ж можете отключить !important внутри bootstrap. Смотри $enable-important-utilities.

Если нужен пример: вот как подключается и переопределяются параметры в одном из моих проектов

Comments

[Black_Fire]

то есть эта переменная находится в

node_modules/bootstrap/scss/bootstrap/scss/_variables.scss

И нужно иvпортировать этот файл в свой файл scss. а там переопределить его?

[Alex]

Black_Fire, Это зависит от того как именно в вашем случае подключался bootstrap

[Black_Fire]

да, и работает если ещё scoped в style поставить.