Gulp-从节点 - sass迁移到sass for angular.js

Question

我们有一个Angular.js项目，我们使用Gulp。

我正在尝试摆脱node-sass，因为它已将其弃用sass

是Angular.js与Sass

Node版本兼容：15

我们在这里如何使用Node-sass

'use strict';

var gulp = require('gulp');
var paths = gulp.paths;
var $ = require('gulp-load-plugins')();

// TODO: node-sass is deprecated; replace with
// dart-sass (https://sass-lang.com/dart-sass)
$.sass.compiler = require('node-sass');

gulp.task('styles', function () {

  var injectFiles = gulp.src([
    paths.src + '/{app,components}/**/*.scss',
    '!' + paths.src + '/app/index.scss',
    '!' + paths.src + '/app/vendor.scss'
  ], { read: false });

  var injectOptions = {
    transform: function(filePath) {
      filePath = filePath.replace(paths.src + '/app/', '');
      filePath = filePath.replace(paths.src + '/components/', '../components/');
      return '@import \'' + filePath + '\';';
    },
    starttag: '// injector',
    endtag: '// endinjector',
    addRootSlash: false
  };

  // "Enables you to work on a subset of the original files by filtering them
  // using glob patterns. When you're done and want all the original files back,
  // you just use the restore stream"
  var indexFilter = $.filter(paths.src + '/app/index.scss', {restore: true});

  return gulp.src([
      paths.src + '/app/index.scss', // A template, empty except for the injection target
      paths.src + '/app/vendor.scss' // Currently not used
    ], {allowEmpty: true})
    .pipe(indexFilter)
    .pipe($.inject(injectFiles, injectOptions)) // injects the @import's to all app and component scss
    .pipe(indexFilter.restore)
    .pipe($.sass().on('error', $.sass.logError)) // compiles index.scss (and vendor.scss if existent)
    .pipe($.autoprefixer()
      .on('error', function handleError(err) {
        console.error(err.toString());
        this.emit('end');
      })
    )
    .pipe(gulp.dest(paths.tmp + '/serve/app/'));
});

我的尝试迁移

删除node-sass并安装sass 构建编译器

$.sass.compiler = require('sass');

然后用SASS应用程序不再

Answer 1

我想如何使它

取代

var sass = require('gulp-sass'));
var compiler = require('sass');
sass.compiler = compiler;

以

 var sass = require('gulp-sass')(require('sass'));

这样的情况

....
.pipe(sass().on('error', sass.logError))
....

Answer 2

您还可以使用poStrequirEtransForms属性来配置gulp-sass使用dart-sass（在NPM）。

更改：

var $ = require('gulp-load-plugins')();

当时

var $ = require('gulp-load-plugins')({
  postRequireTransforms: {
    // Use dart-sass as the compiler for gulp-sass.
    sass: function(gulpSass) {
      return gulpSass(require('sass'));
    }
  }
});

可以像往常一样使用插件属性sass（）。 $。sass（）。