Symfony中使用Sass Bundle遇到SCSS文件导入问题

场景说明 #

使用Symfony Sass Bundle开发，文件结构与代码如下：

• 变量文件路径：assets/styles/front/_variables.scss（已存在）
• 业务SCSS文件路径：assets/styles/front/main/contenus.scss，内容：

@import "../variables.scss";

.test { 
  color: $c-primary; 
}

.video {
  height: 240px;
}

在rechercher.html.twig视图中直接引入SCSS文件：

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/front/main/contenus.scss') }}">
{% endblock %}

错误现象 #

浏览器控制台报错：

GET https://127.0.0.1:8000/assets/styles/front/variables net::ERR_ABORTED 404 (Not Found)

其中.video类的CSS规则能正常生效，但变量文件始终无法被识别。

问题原因 #

你直接让浏览器加载SCSS文件，但浏览器本身不支持解析Sass的@import语法和下划线开头的局部文件（_variables.scss）。浏览器会把Sass的@import当成普通CSS导入处理，错误地请求了不存在的variables文件（自动省略了后缀和下划线），同时完全跳过了Symfony Sass Bundle的编译流程。

正确解决步骤 #

1. 修正SCSS文件的导入语法 #

Sass对下划线开头的局部文件支持省略下划线和.scss后缀的导入方式，把contenus.scss里的导入语句改成以下任意一种均可：

// 方式1：使用完整文件名
@import "../_variables.scss";

// 方式2：省略下划线和后缀（推荐）
@import "../variables";

2. 通过Symfony Asset系统引入编译后的CSS #

绝对不能直接让浏览器加载SCSS文件，必须通过Symfony的构建工具（AssetMapper或Encore）将SCSS编译为CSS后再引入：

若使用AssetMapper（Symfony 6.3+推荐）

在Twig中使用importmap标签引入，AssetMapper会自动完成SCSS到CSS的编译：

{% block stylesheets %}
    {{ importmap('styles/front/main/contenus.scss') }}
{% endblock %}

开发环境下会自动实时编译，生产环境需运行php bin/console asset-map:compile生成最终编译文件。

若使用Webpack Encore

1. 在webpack.config.js中配置入口：

Encore
    // ...其他已有的配置
    .addEntry('contenus', './assets/styles/front/main/contenus.scss')
;

2. 运行编译命令：开发环境用npm run dev，生产环境用npm run build
3. 在Twig中引入编译后的资源：

{% block stylesheets %}
    {{ encore_entry_link_tags('contenus') }}
{% endblock %}

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