web-dev-qa-db-fra.com

@import dans l'instruction @if dans Sass

Je veux charger uniquement les css nécessaires à la page de connexion pour les performances. Sur mes autres pages, je veux un fichier CSS groupé qui sera mis en cache sur chaque page qui contient tous mes CSS.

J'ai les fichiers suivants:

minifiedcssforloginpage.scss
grouped-pages.scss

Dans minifiedcssforloginpage.scss, je déclare $ load-complete-css: false. Ensuite j'importe myproject.scss qui contient toutes les importations de mes modules, layouts, core ... Dans myproject.scss je veux faire quelque chose comme

@if $load-complete-css {
     @import module1;
     @import module2;
     @import module3;
}

Donc, minifiedcssforloginpage.scss générerait minifiedcssforloginpage.css avec moins de css que grouped-pages.css (qui a un var $ load-complete-css défini sur true).

Mais j'obtiens une erreur que ce n'est pas possible "Les directives d'importation ne peuvent pas être utilisées dans les directives de contrôle ou les mixins".

if-statementimportsassdependenciesmixins
26
woutvdd

C'est une de ces choses qui n'est tout simplement pas autorisée. La seule chose que vous pouvez faire est de transformer ces importations en mixins (importez le fichier en dehors du @if et appelez le mixin le cas échéant).

Clarification:

_partial.scss

@mixin partial {
    .test { color: red }
    // other styles here
}

styles.scss

@import "partial";
@if $someval == true {
    @include partial;
}
27
cimmanon

L'équipe de développement principale hésite à implémenter cette fonctionnalité, bien qu'elle envisage la mise en œuvre d'un tout nouveau système de dépendance.

Consultez les problèmes Github suivants:

13
John Slegers

Mettez vos styles dans divers fichiers partiels d'une manière qui vous convient. Ensuite, vous pouvez créer un fichier SASS distinct pour votre page de connexion qui importe uniquement les fichiers avec les styles appropriés.

Pour citer ma réponse à une autre question:

Il n'est actuellement pas possible d'utiliser SASS pour inclure des fichiers de manière dynamique. @import ne peut pas être utilisé dans les directives de contrôle (par exemple @if) ou mixins, l'utilisation d'une variable dans une directive d'importation est une syntaxe erronée, et il n'y a pas de directive pour mettre fin à l'exécution du fichier plus tôt (ce qui effectivement permettrait des importations conditionnelles). Cependant, vous pouvez résoudre votre problème en modifiant la façon dont vous structurez vos règles de style.

... Si vous avez des styles qui [devraient être] inclus conditionnellement [ils] devraient être encapsulés dans des mixins, dans des fichiers 'module' ou 'bibliothèque'. ... L'idée principale est que l'importation d'un tel fichier ne produira aucun CSS . De cette façon, vous pouvez importer ces fichiers de manière redondante afin d'utiliser les mixins où vous en avez besoin.

5
Stephen M. Harris