在 symfony ux css 中，直接在 twig 模板里写样式的最推荐做法是使用 {% stylesheets %} 标签配合 @import 指令，或者利用 symfony ux 提供的 stimulus 控制器结合 css 变量。对于简单的内联样式覆盖或动态主题切换，推荐使用 style 属性绑定 css 变量。若需引入外部 css 文件，应使用 stylesheets 标签。
如何使用 stylesheets 标签引入 CSS？
使用 {% stylesheets %} 标签可以自动处理 CSS 文件的引入和压缩。该标签会查找指定的 CSS 文件并生成相应的 标签。例如，引入 app.css 文件：
{% stylesheets 'assets/css/app.css' %}
{% endstylesheets %}
{% stylesheets 'assets/css/app.css' %}
<link rel="stylesheet" href="%7B%7B%20asset_url%20%7D%7D">
{% endstylesheets %}
如何动态设置 CSS 变量？
通过 Stimulus 控制器可以动态修改 CSS 变量，从而实现主题切换或动态样式。例如，创建一个名为 theme-controller.js 的 Stimulus 控制器：
import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
connect() {
this.element.style.setProperty('--primary-color', '#ff0000');
}
}
import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
connect() {
this.element.style.setProperty('--primary-color', '#ff0000');
}
}
如何在 Twig 中使用 CSS 变量？
在 Twig 模板中，可以通过 style 属性直接应用 CSS 变量。例如，设置一个元素的背景色为 CSS 变量 --primary-color：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
