Skip to content

[AssetMapper] @import directive does not work in css #60729

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
lyrixx opened this issue Jun 6, 2025 · 1 comment
Open

[AssetMapper] @import directive does not work in css #60729

lyrixx opened this issue Jun 6, 2025 · 1 comment
Labels
AssetMapper Bug Status: Needs Review

Comments

@lyrixx
Copy link
Member

lyrixx commented Jun 6, 2025 •
edited
Loading

Symfony version(s) affected

7.3.0

Description

In my app.css, I put

@import './test.css';

and in test.css:

body {
    background-color: red;
}

And the background is still white

=> My browser try to load https://127.0.0.1:8000/assets/styles/test.css, but faces a 404.

I'm using symfony-cli, but it's the same with caddy

Note

I have another issue this relative URL, but I cannot reproduce it because of this bug.

How to reproduce

See this repo
@lyrixx lyrixx added the Bug label Jun 6, 2025
@PhilETaylor
Copy link
Contributor

PhilETaylor commented Jun 7, 2025 •
edited
Loading

Duplicate of closed and unactioned #54024

This article gives you a quick fix, I have tested it in your reproducer and it worked there.

the key is to wrap in url()

@import url('./test.css');

Also noted in your reproducer that your import was not at the start of the file

The @import CSS at-rule is used to import style rules from other valid stylesheets. An @import rule must be defined at the top of the stylesheet, before any other at-rule (except @charset and @layer) and style declarations, or it will be ignored.

Image

Looks like

symfony/src/Symfony/Component/AssetMapper/Compiler/CssAssetUrlCompiler.php

Line 21 in 53b6121

* Resolves url() paths in CSS files.
is designed to look for @import url() syntax... with the regex https://regex101.com/r/BOJ3vG/1 and thats why it works when there is a @import url() syntax but not when the url function is missing.

@PhilETaylor PhilETaylor mentioned this issue Jun 7, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
AssetMapper Bug Status: Needs Review
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@PhilETaylor @lyrixx @carsonbot