Skip to content

[AssetMapper] SCSS @import must be processed by external tool #62195

@kraz

Description

@kraz

Symfony version(s) affected

7.3.5

Description

After #62054 when using in combination with symfonycasts/sass-bundle the imported SCSS files are processed by the AssetMapper, not by the SASS binary. The SASS build is ok, but when the browser tries to fetch the asset it throws:

ErrorException: Unable to find asset "page" referenced in 
"... /symfony-asset-mapper-7-3-5-import-issue/assets/styles/ui/_theme.scss". 
The file "... /symfony-asset-mapper-7-3-5-import-issue/assets/styles/ui/page" does not exist.

... /symfony-asset-mapper-7-3-5-import-issue/vendor/symfony/asset-mapper/Compiler/CssAssetUrlCompiler.php:111

How to reproduce

Here is a sample script which reproduces the issue:

#!/usr/bin/env bash

set -e

# OK
# symfony new symfony-asset-mapper-7-3-5-import-issue --webapp --version=previous --php=8.4 && cd symfony-asset-mapper-7-3-5-import-issue

# Failing
symfony new symfony-asset-mapper-7-3-5-import-issue --webapp --version=stable --php=8.4 && cd symfony-asset-mapper-7-3-5-import-issue

composer require symfony/asset-mapper
composer require symfonycasts/sass-bundle

rm -f assets/styles/app.css
sed -i "s|/app.css|/app.scss|" assets/app.js
mkdir -p assets/styles/ui

cat > assets/styles/app.scss <<'END'
@import "ui/theme"

END

cat > assets/styles/ui/_theme.scss <<'END'
@import "page";

END

cat > assets/styles/ui/_page.scss <<'END'
body {
  background-color: green;
}

END

yes n | bin/console make:controller App -i
sed -i "s|/app|/|" src/Controller/AppController.php
cat > templates/app.html.twig <<'END'
{% extends 'base.html.twig' %}

{% block body %}
Assets OK if you see this text on green background!
{% endblock %}

END

cat > tests/AssetsImportTest.php <<'END'
<?php

declare(strict_types=1);

namespace App\Tests;

use Symfony\Bundle\FrameworkBundle\Test\WebTestCase;

class AssetsImportTest extends WebTestCase
{
    public function testImportAssets(): void
    {
        $client = static::createClient();

        /** @var \Symfony\Bridge\Twig\Extension\AssetExtension $assets */
        $assets = $client->getContainer()->get('twig.extension.assets');
        $url = $assets->getAssetUrl('styles/app.scss');

        $this->assertStringEndsWith('.css', $url);
        $crawler = $client->request('GET', $url);

        $this->assertResponseIsSuccessful();
        $this->assertStringContainsString('background-color: green;', $client->getInternalResponse()->getContent());
    }
}

END

bin/console sass:build -vvv
bin/phpunit

Possible Solution

Exclude imports inside scss files starting with _.

Additional Context

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions