Блог

Главная - Вопросы по программированию - Пользовательский scss не переопределяет bootstrap

Пользовательский scss не переопределяет bootstrap

#bootstrap-4 #sass #nuxt.js

#bootstrap-4 #sass #nuxt.js

Вопрос:

У меня есть global.scss файл, который включает в себя все мои пользовательские scss файлы, например:

 // global.scss

    // Variables amp; Fonts
    @import "variables";
    @import "fonts";
    
    // Components
    @import "components/navbar";
    
    // Bootstrap styles
    @import "~bootstrap/scss/bootstrap";

Но по какой-то причине мой components/navbar код перезаписан, я могу заставить их работать, только если добавлю !important ко всем своим свойствам.

Что я здесь делаю не так?

Редактировать:

Поскольку я сначала импортирую свои компоненты / панель навигации, этот файл должен иметь более высокий приоритет над файлом начальной загрузки, поэтому я не понимаю, как bootstrap записывает мои правила css.

Единственный способ прямо сейчас, которым я могу увеличить свой приоритет, — это использовать ID's or !important , но это было бы немного глупо.

Комментарии:

1. если вы просматриваете правила css в своем браузере, вы видите, что ваши правила отображаются, но отменены / вычеркнуты? Если это так, взгляните на правило, которое вступает в силу, и настройте свою специфику, чтобы иметь приоритет.

2. Разве мой файл компонентов не должен иметь начальный приоритет, поскольку я импортирую его первым? Правило css вычеркнуто, вот почему я говорю, что оно перезаписано, единственными способами, которые я мог придумать для увеличения моего приоритета, было бы изменить мои классы на идентификаторы или продолжить !important , и это было бы глупо.

3. попробуйте поместить свой пользовательский стиль после импорта начальной загрузки, если это не сработает, попробуйте добавить больше специфики (используя вложенность) в свои пользовательские правила, пока добавление не получит приоритет над правилом начальной загрузки.

4. Ах! Сначала ставлю мой bootstrap, а затем мои пользовательские стили компонентов! Теперь я понял. Перезапись, сначала идет bootstrap, а затем я их перезаписываю. какая глупая ошибка: P Тем не менее, файл переменных, похоже, работает в любом случае, интересно.

5. Вот статья о каскаде CSS: wattenberger.com/blog/css-cascade