es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Problema de Mixin SCSS debido al uso

05 Jun, 2023 Programación

Tengo un archivo llamado _mixins.scss. Lo @use en un archivo llamado _index.scss junto con mis otros parciales. Luego los @forward todos estos archivos en mi archivo home.scss.

El contenido de _mixins.scss es
sass
@mixin flexCenter($flex-direction){
display:flex;
justify-content:center;
align-items:center;
flex-direction:$flex-direction;
// Si se requiere altura, agregar manualmente
}

El contenido de _index.scss es
sass
@use 'resets' as *;
@use 'fonts' as *;
@use 'mixins' as *;

(Todos los caminos de los archivos son correctos)

sass
@forward '../'; // importa todos los estilos de index.scss
// @import '../mixins';

.landing-section{
@include flexCenter(row);

// altura:100vh;

}

Sin embargo, cuando intento usar mi mixin, obtengo un error.

Error: mixin indefinido.
@include flexCenter(row);

Mi estructura de carpetas es

scss/home

_mixins.scss y _index.scss están en el directorio scss mientras que home.scss está en el directorio home.

Curiosamente, cuando uso el antiguo y obsoleto @import, mi mixin funciona.
¿Cómo puedo solucionar este problema?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema aquí es que cuando usas @use en lugar de @import, crea un nuevo ámbito en el que necesitas referirte explícitamente al espacio de nombres del módulo para acceder a sus miembros (en este caso, la mixin flexCenter).

    Para usar la mixin flexCenter en tu archivo home.scss, debes agregar un prefijo con el espacio de nombres del módulo (mixins.flexCenter), así:

    @forward '../';

.landing-section {
    @include mixins.flexCenter(row);

    height: 100vh;
}

    Esto le indicará a Sass que busque dentro del módulo mixins la mixin flexCenter.

    Alternativamente, también puedes usar la notación abreviada para @use para darle al módulo un alias más corto y usar ese en su lugar:

    @use '../index' as *;
// o @use '../mixins' as mixins;

.landing-section {
    @include mixins.flexCenter(row);

    height: 100vh;
}

    De cualquier manera, recuerda usar el espacio de nombres del módulo correcto al referirte a los miembros del módulo importado.

Comments are closed.