sass中的规则@use使用gulp无法正确编译 [英] At-rule @use in sass compiles incorrectly using gulp

问题描述

我用口水.我的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);

当我使用规则@use时，出现错误- https://monosnap.com/file /nAfh13fp9WsgfDetNmJ4F57dYEgVXk

我的代码- https://monosnap.com/file/ucW4I8ehPDPQojdZYJSQmI4jbMOJpi

我不明白为什么会这样.

我需要你们的帮助.非常感谢.

解决方案

此错误是由于node-sass还不支持sass的@use而导致的.您可以查看node-sass的问题2886 .

AFAK，您应该将gulp-sass的编译器更改为Dart Sass，这是Sass的主要实现，它支持所有新的sass功能.您可以在此处查阅文档.

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

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.

解决方案

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");

这篇关于sass中的规则@use使用gulp无法正确编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！