Sass mixin no se importa ni se compila

1

Estoy usando el paquete web 4 y el mini-css-extract-plugin junto con sass-loader / node-sass para compilar mi sass en css. Todo parece estar funcionando bien, sin embargo, un mixin que se encuentra en un archivo scss importado no funcionará y aparece un error de compilación.

ERROR in ./node_modules/css-loader??ref--6-1!./node_modules/sass-loader/lib/loader.js??ref--6-2!./src/sass/components.scss
Module build failed:
  @include radi(10px);
          ^
      No mixin named radi
      in /Users/Me/Sites/project/src/sass/components.scss (line 15, column 12)
 @ ./node_modules/css-loader??ref--6-1!./node_modules/sass-loader/lib/loader.js??ref--6-2!./src/css/core.css 6:10-150

Lo extraño es que si muevo esa mezcla en el archivo scss que hace referencia a ella, entonces funciona y se compila. El orden de los archivos scss importados fue el primer lugar en el que miré, pero los mixins se cargan antes de la llamada, así que estoy realmente confundido por qué esto sigue fallando :(

contenido de mixins.scss

@mixin radi($radius) {
   -webkit-border-radius: $radius;
   -moz-border-radius: $radius;
   -ms-border-radius: $radius;
   border-radius: $radius;
};

contenido de components.scss

.box {
   width: 100px;
   @include radi(10px);
   background-color: pink;
}

Entonces tengo un archivo core.css que importa todos mis archivos scss

@import url("../vendor/normalize.css");
@import url("../vendor/grid.scss");
@import url("../vendor/fonts.css")
@import url("../sass/mixins.scss");
@import url("../sass/components.scss");

Como puede ver, los mixins se cargan antes que los componentes, por lo que el mixin debería estar disponible para components.scss, pero no lo está. Como mencioné antes, si pongo el mixin en components.scss donde existe la llamada al mixin, ¡el mixin funciona! ¡confuso! Incluso si coloco una declaración de importación en la parte superior de components.scss para cargar el archivo mixin, todavía falla :(

4

Al importar archivos, debe tener en cuenta estas reglas:

  • si desea importar un archivo scss, solo necesita hacer referencia a su ubicación y nombre de archivo; sin necesidad de extensión:@import “path/to/scssfile”;

  • si desea importar un css, apunte al archivo css incluida su extensión de archivo usando url():@import url(“path/to/cssfile.css”);

  • pero si usa an url()para importar un archivo scss, entonces el archivo se compilará y agregará como una importación css simple, por @import url(“path/to/scssfile”);lo que compilará el archivo scss y agregará una importación a su archivo de salida css

Entonces, la solución es eliminar los url()archivos scss importados:

@import url("../vendor/normalize.css");
@import "../vendor/grid";
@import url("../vendor/fonts.css")
@import "../sass/mixins";
@import "../sass/components";

Espero eso ayude.

0
0

Esto podría ser solo un error tipográfico en su código anterior, pero le falta un ;después importde fonts.css? Quizás eso ayude ...