CODEWITHSUNDEEP
sassgulp
Владимир Мигаль
Владимир Мигаль

Reputation: 25

At-rule @use in sass compiles incorrectly using gulp

I use gulp. My gulpfile.js:

"use strict";

const gulp = require("gulp");
const sass = require("gulp-sass");
const browserSync = require("browser-sync").create();
const autoprefixer = require("gulp-autoprefixer");
const sourcemaps = require("gulp-sourcemaps");
const concat = require("gulp-concat");

sass.compiler = require("node-sass");

function generateCSS() {
  return gulp
    .src("app/scss/**/*.scss")
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
    .pipe(concat("styles.css"))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest("app/css"))
    .pipe(browserSync.stream());
}

function watchFiles() {
  browserSync.init({
    server: {
      baseDir: "app",
    },
  });
  gulp.watch("app/scss/**/*.scss", generateCSS);
  gulp.watch("app/*.html").on("change", browserSync.reload);
}

exports.css = generateCSS;
exports.watch = watchFiles;

exports.default = gulp.series(generateCSS, watchFiles);

When I use at-rule @use, I have an error - https://monosnap.com/file/nAfh13fp9WsgfDetNmJ4F57dYEgVXk

My code - https://monosnap.com/file/ucW4I8ehPDPQojdZYJSQmI4jbMOJpi

I don't understand why that happened.

I need your help guys. Thanks a lot.

Upvotes: 0

Views: 494

Answers (1)

TizeeU0U
TizeeU0U

Reputation: 474

This error is due to that node-sass has not supported sass's @use yet. You could check out node-sass's issue 2886.

AFAK, you should change the gulp-sass's compiler to Dart Sass, the primary implementation of Sass which supports all new sass features. You could check out the doc here.

- sass.compiler = require("node-sass");
+ sass.compiler = require("sass");

Upvotes: 2

Related Questions