Question

我正在尝试在Symfony 4项目中编辑app.scss。

但是background-color无效。

body {
  background-color: #ccccff;
}

在我的base.html.twig上，我拥有这个：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            {% block title %}Welcome!
            {% endblock %}
        </title>
        <meta content="width=device-width, initial-scale=1" name="viewport">
        <link href="/css/bootstrap.min.css" rel="stylesheet">
        <link href="/css/app.scss" rel="stylesheet">
        <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" rel="stylesheet"> {% block stylesheets %}{% endblock %}
        </head>

        <body>
            {% include "components/sidebar/sidebarHeader.html.twig" %}
            <div class="col-md-12"> {% block body %}{% endblock %}
                </div>
                {% include "components/sidebar/sidebarFooter.html.twig" %}

                {# TODO: Trouver un moyen d'insérer <script src="/js/jquery.min.js"></script> au lieu du footer sidebar #}
                <script src="/js/popper.min.js"></script>
                <script src="/js/bootstrap.min.js"></script>
                {% block javascripts %}{% endblock %}
            </body>
        </html>

唯一有效的解决方案是直接编辑bootstrap.min.css。

但是，如果我编辑app.scss，如果它是在base.html.twig上的bootstrap.min.css之后，为什么不起作用？

感谢您的帮助！

Answer 1

您的代码示例中有此内容...

<link href="/css/app.scss" rel="stylesheet">

但是，由于浏览器是预编译的CSS，因此它不知道如何处理。您需要将该行替换为：

<link href="/css/app.css" rel="stylesheet">

然后实际上使用Sass编译scss文件。确保已编译的css文件与Sass文件位于同一位置，否则您需要更改路径。

身体CSS上的背景色不起作用

1 个答案: