Why does the "undefined mixin" error occur?

Question

Sass

mixin:

@mixin font($font_name, $file_name, $weight, $style) {
  @font-face {
    font-family: $font_name;
    font-display: swap;
    src: url('../fonts/#{$file_name}.woff') format('woff'),
      url('../fonts/#{$file_name}.woff2') format('woff2');
    font-weight: #{$weight};
    font-style: #{$style};
  }
}

Function from gulp to work with fonts:

function fontsStyle(cb) {
  let file_content = fs.readFileSync(srcPath + '/assets/scss/fonts.scss')
  if (file_content == '') {
    fs.writeFile(srcPath + '/assets/scss/fonts.scss', '', cb)
    return fs.readdir(path.build.fonts, function (err, items) {
      if (items) {
        let c_fontname
        for (var i = 0; i < items.length; i++) {
          let fontname = items[i].split('.')
          fontname = fontname[0]
          if (c_fontname != fontname) {
            fs.appendFile(
              srcPath + '/assets/scss/fonts.scss',
              '@include font("' +
                fontname +
                '", "' +
                fontname +
                '", "400", "normal");\r\n',
              cb
            )
          }
          c_fontname = fontname
        }
      }
    })
  }
  cb()
}

Mistake:

Error: src\assets\scss\fonts.scss
Error: Undefined mixin.
  ╷
1 │ @include font('Barlow-Regular', 'Barlow-Regular', '400', 'normal');
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\assets\scss\fonts.scss 1:1  root stylesheet

fonts.scss file:

@include font('Barlow-Regular', 'Barlow-Regular', '400', 'normal');

Also gulp does not include fonts in dist/assets/css/fonts.css file is completely empty.

Gulp starts up, works, but there are no fonts and an error in the console. What does sass want? And how to fix it.

Answer 1

Before a mixin can be used, it must be enabled .