Чтобы избавиться от !important, вам просто нужно написать более конкретный c селектор, чем тот, который в настоящее время применяется.
.nav-link цвета, похоже, имеют специфичность 3 × class в Boostrap Vue, что означает, что 3 × class + 1 × el будет достаточно:
.nav-item.nav-item.nav-item a {
color: red;
}
Примечание: если вы обнаружите необходимость повторить селектор классов, несколько раз громоздкий и генерирующий слишком много стандартного кода в вашем CSS, один часто используемый трюк - это искусственное завышение специфичности моих селекторов с помощью 1 × id:
#app .nav-item a { color: red }
Еще одно замечание по этому поводу что вам даже не нужно иметь идентификатор предка, потому что это также будет работать:
body:not(#_) .nav-item a {
color: red;
}
... при условии, что ваш элемент <body> не имеет id="_".
В scss это становится еще проще, так как все, что вам нужно сделать, это обернуть ваш текущий код в body:not(#_) { ...current code ... }.
Со временем я получил некоторые комментарии по поводу этой техники, которая столь же плоха, как и использование !important, потому что она также объединяет специфику, и вы в конечном итоге играете все сложнее писать даже более сильные селекторы, когда текущие требуют перезаписи.
Мой ответ на это заключается в том, что правила игры фактически устанавливаются тем, как работает CSS. Я не установил правила, я только играю в игру. Но самая важная часть заключается в том, что, не используя !important, я позволяю JavaScript стилевому оформлению иметь приоритет, что является наиболее важной причиной, по которой использование !important является плохой практикой.
Более общий ответ на этот тип вопросов будет следующим: проверьте ваш элемент, выясните, какое правило применяет текущее значение, и напишите немного более конкретное c (или точно такое же c, если вы поместите его в тег <style> вашего компонента, поскольку он применяется последним).
Также обратите внимание, что ваш код должен быть в теге <style>, который не scoped. Если это scoped, префикс с /deep/, ::v-deep или >>> должен работать, но недавняя ошибка в Vue, которая еще не устранена, разбивает пробивающие селекторы в тегах <style> с lang="scss", если ваш sass-loader выше 7.* (текущий последний: 8.0.2). Фактически это означает, что будет работать следующее:
<style scoped lang="css">
/deep/ .nav-item.nav-item.nav-item a {
color: red;
}
</style>
... (где lang="css" является необязательным, потому что это значение по умолчанию), тогда как
<style scoped lang="scss">
/deep/ .nav-item.nav-item.nav-item a {
color: red;
}
</style>
... будет не работает .
Однако это (другая) ошибка, и она, вероятно, будет исправлена в ближайшее время, после чего я удалю эту часть своего ответа.