Utiliser @layer dans un projet SCSS

Bonjour.
(je ne suis pas sûr que cette question est sa place sur ce forum, vu qu'il s'agit de SCSS…)

Je souhaite mettre en place une organisation de mes CSS via @layer dans un projet construit en SCSS (SASS). Le problème est que le compilation ne fonctionne pas.

@import "test" layer(reset);

crée une erreur :

[14:48:37] Erreur lors de la compilation SASS ! Ignoring local @import of "test" as resource is missing.

et

@layer reset {
    @import "test";
}

n'inclus pas le CSS…

Quelqu’un sait-il comment utiliser @layer avec SCSS ?

Hello,

C'est bizarre parce que dans les quelques projets en SCSS qu'il nous reste, je ne crois pas avoir de souci avec @layer.

Par contre je vais peut-être dire une bêtise mais il me semble que @import est obsolète en SCSS (il faut utiliser @use) et que ça pourrait être la source du problème.

https://sass-lang.com/documentation/at-rules/import/

Hello,

Raphael a écrit :

....
Par contre je vais peut-être dire une bêtise mais il me semble que @import est obsolète en SCSS (il faut utiliser @use) et que ça pourrait être la source du problème.
...

Je te rassure, tu ne dis pas de bêtise. l'utilisation d'@import est obsolète. indique une erreur dans le terminal. Je pense que les conséquences peuvent venir de ça.

@Derwoed : quelle version sass utilises tu ? (package.json)
Modifié par Niuxe (13 Nov 2025 - 17:33)

Oui, j'ai vu le passage de @import à @use. Le problème est qu'ils ne fonctionnent pas pareil et le passage de l'un à l'autre n'est pas anodin pour mon (très gros) projet. Comme le @import est encore supporté, j'espérais en faire l'économie. Je vais peut-être obligé d'y passer…

Ma version de SASS : 1.87.0, mais passer à la dernière version (1.94.0 https://www.npmjs.com/package/sass) ne semble pas changer quoi que ce soit…
J'utilise aussi gulp-sass en version 5.1.0 (la dernière est la 6.0.1).
Modifié par Derwoed (14 Nov 2025 - 11:57)

a écrit :

J'utilise aussi gulp-sass en version 5.1.0 (la dernière est la 6.0.1).

Il y a de fortes chances que ça vienne de là aussi. Il me semble que cette version ne prend pas en charge @layer.

Essaie de faire ceci afin de mettre à jour :

npm uninstall gulp-sass
npm install --save-dev gulp-sass sass

Le problème de Gulp est qu'il est possible que les librairies dépendantes ne suivent pas les pratiques actuelles. Tu te retrouves figer dans le temps.

Avant de faire un gros changement sur un gros projet, tu peux faire ce que je fais parfois. Tu ouvres un nouveau petit projet à côté (dans un dossier complètement à part). Tu reprends là où est le problème. Ça permet de mieux cerner le problème sans que tu aies toutes les dépendances. Je sais que c'est chiant à faire (refaire un pseudo clone). Parfois, ça saute aux yeux et tu trouves la solution. Pour ton cas, ça va te permettre de tester @use et @import et voir si ça vient de là. Quand le projet à x fichiers scss, ça va t'éviter de faire un énorme changement (chronophage) alors que ce n'est pas ça du tout.

Avant de faire tout ce bazar, supprime node_modules, package-lock.json et fait un npm i dans une autre branche. Avec Gulp, j'ai remarqué que tu peux avoir des erreurs en console, un problème de compilation, etc. C'est souvent la conséquenses de plusieurs install au cours d'un développement.
Modifié par Niuxe (15 Nov 2025 - 17:17)

Merci pour ces réponses. Je vais tester tout ça jeudi au plus tard…

Bon, j'ai tout nettoyé et tout mis à jour (via yarn pas npm, vu que mon projet est géré en yarn…), mais cela ne change rien : impossible de faire fonctionner @layer . Il est probable que le problème vienne de ma config (gulp-sass) mais de toute façon SASS et @layer semble assez peu compatible à ce jour si j'en crois ce fil SASS : https://github.com/sass/sass/issues/3842#issuecomment-3012156713.

Je renonce donc à @layer pour l'instant…

Je ne connais pas SCSS mais le changement de nom de @layer à @use vient probablement du fait que @layer est maintenant une commande standard de CSS.