@import en la statement @if en Sass

Quiero cargar solo el CSS necesario para la página de inicio de sesión para el rendimiento. En mis otras páginas quiero un archivo css agrupado que se almacenará en caché en cada página que contenga todo mi CSS.

Tengo los siguientes archivos:

minifiedcssforloginpage.scss grouped-pages.scss 

En minifiedcssforloginpage.scss Declaro $ load-complete-css: false. Después importo myproject.scss que contiene todas las importaciones de mis módulos, diseños, núcleo … En myproject.scss quiero hacer algo como

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

Entonces minifiedcssforloginpage.scss generaría minifiedcssforloginpage.css con menos css y luego agrupado-páginas.css (que tiene un var $ load-complete-css establecido en verdadero).

Pero me aparece un error que indica que esto no es posible “Las directivas de importación no se pueden usar dentro de directivas de control o mixins“.

Es una de esas cosas que simplemente no está permitido. Lo único que puede hacer es convertir esas importaciones en mixins (importar el archivo fuera de @if y llamar a la mezcla cuando corresponda).

Aclaración:

_partial.scss

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

styles.scss

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

El equipo de desarrollo central es reacio a implementar esta característica, aunque están considerando la implementación de un nuevo sistema de dependencia.


Mira los siguientes problemas de Github:

  • Permitir @import dentro de @if (# 451)
  • Usar declaraciones @import dentro de directivas de control o mixins (# 779)
  • Permitir @imports opcionales (# 779)
  • Dependencias dinámicas (# 739)

Coloque sus estilos en varios archivos parciales de una manera que tenga sentido para usted. Luego, puede haber creado un archivo SASS separado para su página de inicio de sesión que solo importa los archivos con los estilos correspondientes.

Para citar mi respuesta a otra pregunta:

Actualmente no es posible usar SASS para incluir archivos dinámicamente. @import no se puede usar dentro de las directivas de control (ej. @if ) o mixins, usar una variable en una directiva de importación es una syntax errónea, y no hay una directiva para terminar la ejecución del archivo anticipadamente (lo que efectivamente permitiría las importaciones condicionales). Sin embargo, puede resolver su problema cambiando la forma en que estructura sus reglas de estilo.

… Si tiene estilos que [deberían incluirse] condicionalmente [ellos] deberían estar encapsulados en mixins, en archivos ‘module’ o ‘library’. … La idea principal es que la importación de uno de esos archivos no generará ningún CSS . De esta forma, puede importar estos archivos de forma redundante para que pueda usar los mixins donde los necesite.