Css 覆盖laravel中的引导主题_Css_Laravel_Twitter Bootstrap_Font Awesome

Css 覆盖laravel中的引导主题

css laravel twitter-bootstrap

Css 覆盖laravel中的引导主题,css,laravel,twitter-bootstrap,font-awesome,Css,Laravel,Twitter Bootstrap,Font Awesome,我试图在我的laravel项目中覆盖Bootstrap的主题。我可以通过在app.scss文件中更改变量来更改app.css中的变量，如下所示： app.scss： // Fonts @import url('https://fonts.googleapis.com/css?family=Nunito'); // Variables @import 'variables'; $primary: black; $success: black; // Bootstrap @import '~b

我试图在我的laravel项目中覆盖Bootstrap的主题。我可以通过在app.scss文件中更改变量来更改app.css中的变量，如下所示：

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.css更改为：

: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上进行缓存刷新后，它也会发生变化，因为当我检查根目录时，我发现：

因此，无论出于何种原因，fontawesome样式表正在覆盖我的引导样式表。我不知道为什么会这样

下面是我的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有关的东西都注释掉，它仍然不会显示出来。我相信这是显而易见的，但我真的需要一些帮助。谢谢。

这不是一个复制品。在那篇文章中接受的答案是刷新缓存并重新加载页面。我非常清楚地说，我试过这个，但它不起作用。谢谢。正在尝试放置

@import“自定义”

在

@import'~bootstrap/scss/bootstrap'之前由于您正在编译到同一个文件，并且浏览器将读取第一个样式规则，因此无法工作。它没有在custom.scs中查找更改。它发生在app.scss中。我试着在custom.scss pllus中放置相同的东西进行测试，但没有改变。“因此，无论出于何种原因，fontawesome样式表正在覆盖我的引导样式表”“即使我注释掉与fontawesome有关的所有内容，它仍然不会显示“这些是相互矛盾的语句”。浏览器检查器应该能够向您显示规则从哪个样式表导入。