Блог

Я не уверен, что это то, что я сделал неправильно при установке Bootstrap 5, но многие мои кнопки используют черный шрифт вместо белого, как показано в документации по Bootstrap 5

Например, .btn-primary в документах начальной загрузки выглядит следующим образом:

Однако, когда я использую идентичный HTML, я получаю это в результате:

Для справки HTML как в их примере, так и в моем:

 <button type="button" class="btn btn-primary">Primary</button>
 

Цвет текста отличается не только от цвета текста, но и от цвета фона. На самом деле, просматривая мой скомпилированный файл .css, большая часть цветов начальной загрузки, используемых во всем коде, имеет «размытый» внешний вид, похожий на синий цвет кнопки. Из инструментов разработки Chrome стиль, похоже, исходит из самих файлов начальной загрузки, а не из какого-либо стиля, который я случайно применяю. SCSS компилируется в CSS-файлы с помощью обычной настройки Laravel (webpack mix). Я просто использую пакеты NPM для начальной загрузки 5.

window.bootstrap = require('bootstrap'); и пакет NPM "bootstrap": "^5.1.3",

В моем файле app.scss вообще мало что есть:

 // Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import "~bootstrap-icons/font/bootstrap-icons";

// "Lobster" Font for H1's
@import "https://fonts.googleapis.com/css2?family=Cuprumamp;family=Lobsteramp;display=swap";

// Flatpickr Styles
@import "~flatpickr/dist/flatpickr.min.css";

// Font Awesome Free
@import "~@fortawesome/fontawesome-free/css/all.min.css";

// DataTables Styles
@import "~datatables.net-bs5/css/dataTables.bootstrap5.min.css";
@import "~datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css";

h1 {
    font-family: 'Lobster', cursive;
}

a.torn-link {
    color: $orange;
}

.ttt-title {
    font-family: 'Lobster', cursive;
}
.card-title {
    font-family: 'Cuprum', sans-serif;
}
html {
    background-color: #fff;
    color: #636b6f;
}
body {
    background-color: #fff;
    color: #636b6f;
}
.links {
    >a {
        color: #636b6f;
        padding: 0 25px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .1rem;
        text-decoration: none;
        text-transform: uppercase;
    }
}
#settings-button {
    amp;:hover {
        fill: rgba(189, 189, 189, 0.25);
    }
}
.ui-dialog-title {
    font-family: 'Cuprum', sans-serif;
}

thead, th {
    text-align: center;
}
 

Правка: Даже все ссылки, окрашенные в цвет начальной загрузки, кажутся размытыми. Например .link-warning , желтый цвет невозможно использовать, так как цвет слишком размыт, чтобы его можно было прочитать. В то время как желтый цвет на их странице полностью читаем. Так что дело даже не в том, что я просто случайно применяю стиль к кнопке или чему-то в этом роде.

Правка2:

Вот как выглядит моя кнопка в инструментах разработки (обратите внимание, что цвета отличаются от цветов начальной загрузки 5 документов

и CSS кнопок просто поступает из скомпилированного файла app.css, созданного с помощью веб-пакета:

Правка 3: Мой _variables.scss файл:

 // Body
$body-bg: #f8fafc;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;
 

В _variables.scss файле в какой-то момент при добавлении начальной загрузки 5 в Laravel 8 похоже, что один из сценариев добавил цвета, или я в какой-то момент ошибся и добавил цветовую палитру в файл переменных.

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

Простое удаление всех цветов, которые я определил в _variables.scss файле, устранило проблему.