Grav CMS中使用Twig加载custom.css文件失败的问题咨询

刚装完Grav就碰到CSS加载的问题，太常见了！我帮你梳理几个最可能的原因，一个个排查应该就能解决：

Grav的主题资源有特定的路径规则，直接写相对路径css/custom.css大概率会出错——因为Grav的URL路由是动态的，比如访问子页面时，相对路径会指向/page/css/custom.css而非主题目录下的文件。

正确的做法是用Grav内置的theme://协议来引用主题资源，示例代码如下：

<link rel="stylesheet" href="{{ url('theme://css/custom.css') }}">

同时要确认custom.css确实放在user/themes/[你的主题名]/css/目录下（比如默认Quark主题就是user/themes/quark/css/custom.css），别把文件放错位置了。

Grav默认开启了模板缓存和资产缓存，你修改base.html.twig后，服务器可能还在使用旧的缓存文件，根本没加载你新写的代码。解决方法很简单：

• 后台登录后，点击右上角的「Clear Cache」按钮；
• 或者进入Grav根目录，用命令行执行：bin/grav clear-cache（Linux/Mac），Windows则是php bin/grav clear-cache。

如果你修改的base.html.twig是局部模板，要确保其他子模板（比如default.html.twig）确实通过{% extends 'partials/base.html.twig' %}继承了它。有些子模板可能自己重写了<head>区块，把base里的CSS引用给覆盖了。

如果子模板里有{% block head %}代码，一定要用{{ parent() }}来继承base里的内容，示例：

{% block head %}
    {{ parent() }}
    <!-- 子模板自己的额外资源 -->
{% endblock %}

如果你的主题开启了CSS合并功能（比如Quark主题默认开启），Grav会把多个CSS文件合并成一个压缩后的文件，这时候你新加的custom.css可能没被加入合并列表。

打开主题配置文件user/themes/[主题名]/[主题名].yaml，找到assets部分，确保css数组里包含custom.css：

assets:
  css:
    - 'theme://css/custom.css'
    - 'theme://css/main.css'

修改后记得清缓存再测试。

这个虽然少见，但也不能忽略。如果custom.css的文件权限设置不对，服务器（Apache/Nginx）没法读取它，自然加载失败。Linux服务器下，建议把文件权限设为644，文件夹权限设为755，命令行执行：

chmod 644 user/themes/[主题名]/css/custom.css
chmod 755 user/themes/[主题名]/css

内容的提问来源于stack exchange，提问作者Alexander Solonik