Переопределение темы Bootstrap в laravel - PullRequest
Новая
       34

Переопределение темы Bootstrap в laravel

0 голосов
/ 30 сентября 2019

Я пытаюсь переопределить темы Bootstrap в моем проекте laravel. Я могу изменить переменные в app.css, изменив их в файле app.scss, например:

app.scss: 

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

// Variables
@import 'variables';

$primary: black;
$success: black;

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import "custom";

, который меняет app.cssto: 

:root {
  --blue: #3490dc;
  --indigo: #6574cd;
  --purple: #9561e2;
  --pink: #f66d9b;
  --red: #e3342f;
  --orange: #f6993f;
  --yellow: #ffed4a;
  --green: #38c172;
  --teal: #4dc0b5;
  --cyan: #6cb2eb;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;

  // Important
  --primary: black;

  --secondary: #6c757d;

  // Important
  --success: black;

  --info: #6cb2eb;
  --warning: #ffed4a;
  --danger: #e3342f;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: "Nunito", sans-serif;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Я точно знаю, что он меняется, даже после обновления кеша в Chrome, потому что когда я проверяю рут, это то, что я нахожу: enter image description here

Так что по какой-то причине эта потрясающая таблица стилей переопределяет мою таблицу стилей начальной загрузки. Я понятия не имею, почему это происходит.

Вот как выглядит мой файл app.blade.php: 

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="css/font-awesome-animation.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.10.2/js/all.js" integrity="sha384-QMu+Y+eu45Nfr9fmFOlw8EqjiUreChmoQ7k7C1pFNO8hEbGv9yzsszTmz+RzwyCh" crossorigin="anonymous"></script>

    <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" >
    <link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css" >

    <title>Hello, world!!</title>
</head>

<body class="trivalo-background">

@yield('layout')

<script src="https://kit.fontawesome.com/7d75c9db00.js"></script>

<script src="/js/app.js"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

Даже если я закомментирую все, что связано с fontawesome, это все еще не покажет. Я уверен, что это что-то очевидное, но я мог бы действительно помочь с этим. Спасибо.

...