no se puede usar la carpeta local @ font-face SCSS

0

Tengo dos archivos de fuentes "ttf" que tengo que usar con Sass - SCSS y no puedo usarlos directamente desde la carpeta.

ingrese la descripción de la imagen aquí

Mi archivo _mixin.scss :

@mixin font-face($font-name, $font-path, $font-weight, $font-style) {
  @font-face {
    font-family: "Lato-Bold";
    src: url("../../css/fonts/Lato/Lato-Bold.ttf") format('truetype');
    font-weight: 700;
    font-style: bold;
  }
}

¿Esto es correcto?

esto me da un ERROR al compilar ... es la primera vez que uso archivos font-face y ttf. Este es un proyecto, así que no puedo agregar otras fuentes, tengo que usarlo así, ¿me pueden ayudar?

¿Cómo puedo usar este mixin, cómo incluirlo en mi familia de fuentes en mi CSS y / o Html?

Estoy tratando de escribir esto en mi archivo _typography.scss y esto da un error ":

@include font-face("Lato-Bold", "../../css/fonts/Lato/Lato-Bold", 700, bold);

ERROR in ./src/scss/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/scss/main.scss) Module not found: Error: Can't resolve '../../css/fonts/Lato/Lato-Bold.ttf' in '/Users/****/Desktop/****/src/scss' @ ./src/scss/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/scss/main.scss)

Ps: estoy usando webpack.config.js | webpack-dev-server y compilando sass con --watch

¡Gracias por tu ayuda!

5
  • ¿Qué tipo de error obtuvo y por qué puede pasar los perímetros en la mezcla incluso si usa los valores estáticos? 21/03/19 a las 16:54
  • Según su URL, dice que su directorio de fuentes contiene un directorio "Lada", que contiene una fuente llamada "Lada-bolt", pero su estructura de archivos no muestra esta carpeta. ¿Es esto un error de copia al hacer su pregunta? 21/03/19 a las 16:57
  • @Hammadtariq Actualicé con mi error
    AFAF
    21/03/19 a las 16:59
  • estás usando la variable en mixin 21/03/19 a las 17:01
  • @Ferrybig oh, ese "Lado" fue un error al escribir aquí, en mi proyecto está bien, pero lo actualizaré aquí también.
    AFAF
    21/03/19 a las 17:02
0

prueba esto en tu mezcla

@mixin font-face($font-name, $font-path, $font-weight, $font-style) {
  @font-face {
    font-family: $font-name;
    src: url(#{$font-path});
    font-weight: $font-weight;
    font-style: $font-style;
  }
}
6
  • cuando agregas la "url ()" en src que bloqueó mi compilación, pero sin "url ()" no falla, pero aún no puedo aplicar Lato-Bold. Agregué un h1 a la página y lo apliqué así h1 {@ incluir font-face ("Lato-Bold", "../../css/fonts/Lato/Lato-Bold", 700, negrita); }
    AFAF
    21/03/19 a las 17:06
  • qué tipo de error obtiene con "url ()" y asegúrese de que su ruta sea correcta 21/03/19 a las 17:09
  • prueba la sintaxis de interpolación url(#{$font-path}) espero que funcione 21/03/19 a las 17:13
  • y la segunda opción es la ruta absoluta de las fuentes 21/03/19 a las 17:23
  • esa sintaxis no funciona, por lo que las rutas absolutas, tengo que buscar más para eso, esto es extraño por qué no funciona
    AFAF
    21/03/19 a las 17:35