title: At-rule @use in sass compiles incorrectly using gulp
body: <p>I use gulp. My gulpfile.js:</p>
  <pre><code>&quot;use strict&quot;;
  
  const gulp = require(&quot;gulp&quot;);
  const sass = require(&quot;gulp-sass&quot;);
  const browserSync = require(&quot;browser-sync&quot;).create();
  const autoprefixer = require(&quot;gulp-autoprefixer&quot;);
  const sourcemaps = require(&quot;gulp-sourcemaps&quot;);
  const concat = require(&quot;gulp-concat&quot;);
  
  sass.compiler = require(&quot;node-sass&quot;);
  
  function generateCSS() {
    return gulp
      .src(&quot;app/scss/**/*.scss&quot;)
      .pipe(sourcemaps.init())
      .pipe(sass({ outputStyle: &quot;compressed&quot; }).on(&quot;error&quot;, sass.logError))
      .pipe(concat(&quot;styles.css&quot;))
      .pipe(autoprefixer())
      .pipe(sourcemaps.write())
      .pipe(gulp.dest(&quot;app/css&quot;))
      .pipe(browserSync.stream());
  }
  
  function watchFiles() {
    browserSync.init({
      server: {
        baseDir: &quot;app&quot;,
      },
    });
    gulp.watch(&quot;app/scss/**/*.scss&quot;, generateCSS);
    gulp.watch(&quot;app/*.html&quot;).on(&quot;change&quot;, browserSync.reload);
  }
  
  exports.css = generateCSS;
  exports.watch = watchFiles;
  
  exports.default = gulp.series(generateCSS, watchFiles);
  </code></pre>
  <p>When I use at-rule @use, I have an error - <a href="https://monosnap.com/file/nAfh13fp9WsgfDetNmJ4F57dYEgVXk" rel="nofollow noreferrer">https://monosnap.com/file/nAfh13fp9WsgfDetNmJ4F57dYEgVXk</a></p>
  <p>My code - <a href="https://monosnap.com/file/ucW4I8ehPDPQojdZYJSQmI4jbMOJpi" rel="nofollow noreferrer">https://monosnap.com/file/ucW4I8ehPDPQojdZYJSQmI4jbMOJpi</a></p>
  <p>I don't understand why that happened.</p>
  <p>I need your help guys. Thanks a lot.</p>