咕噜咕噜咕.css噜咕噜咕��

gulp with gulp-ruby-sass: Error: ../style.css.map:3:1: Unknown word

本文关键字：css 更新时间：2023-09-26

使用基本的gulp/express构建手表时出现奇怪的错误。

目录布局

 project/
   - sass/
      - style.scss
   - gulpfile.js
   - index.html

古尔普文件.js

var gulp         = require('gulp'),
    sass         = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss    = require('gulp-minify-css'),
    rename       = require('gulp-rename');
gulp.task('express', function() {
  var express = require('express');
  var app = express();
  app.use(require('connect-livereload')({port: 4002}));
  app.use(express.static(__dirname));
  app.listen(4000);
});
var tinylr;
gulp.task('livereload', function() {
  tinylr = require('tiny-lr')();
  tinylr.listen(4002);
});
function notifyLiveReload(event) {
  var fileName = require('path').relative(__dirname, event.path);
  tinylr.changed({
    body: {
      files: [fileName]
    }
  });
}
gulp.task('styles', function() {
    return gulp.src('sass/*.scss')
      .pipe(sass({ style: 'expanded', sourcemap: false }))
      .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
      .pipe(gulp.dest('css'))
      .pipe(rename({suffix: '.min'}))
      .pipe(minifycss())
      .pipe(gulp.dest('css'));
});
gulp.task('watch', function() {
  gulp.watch('sass/*.scss', ['styles']);
  gulp.watch('*.html', notifyLiveReload);
  gulp.watch('css/*.css', notifyLiveReload);
});
gulp.task('default', ['styles', 'express', 'livereload', 'watch'], function() {
});

风格.scss

body { position: relative; }

快速服务器/livereload 工作正常，但是当它尝试编译样式表时，我收到此错误（即使使用 sourcemap: false ）

gulp-ruby-sass: write style.css.map
events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: <LOCAL_PATH_HERE>/style.css.map:3:1: Unknown word

禁用源映射现在有点神秘。你必须这样做

.pipe(sass({ "sourcemap=none": true }))

源

不完全确定为什么这会修复它，但将自动前缀管道更改为：

.pipe(autoprefixer({
     browsers: ['last 2 versions'],
     cascade: false
}))

并将其放在 sass 管道（顶部）之前可以成功构建。

我修复了保留源映射并使用gulp过滤器的此问题：

var filter = require('gulp-filter')
var filterCSS = filter('**/*.css');
gulp.task('styles', function() {
    return gulp.src('sass/*.scss')
      .pipe(sass({ style: 'expanded', sourcemap: true }))
      // Filters only css files before auto prefixing
      .pipe(filterCSS)
      .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
      .pipe(filterCSS.restore())
      .pipe(gulp.dest('css'))
      .pipe(rename({suffix: '.min'}))
      .pipe(minifycss())
      .pipe(gulp.dest('css'));
});

我在使用gulp-ruby-sass插件时遇到了同样的问题。我发现了这篇博客文章，它解释了 gulp-ruby-sass 插件中有几个关于源映射的错误。他们都在一个多星期前关闭了。如果您升级到 gulp-ruby-sass~1.0.0-alpha，这应该可以解决您在源映射中遇到的问题。

如果这不起作用，我上面链接的文章展示了如何使用没有源映射问题的 gulp-sass 插件。

尝试升级到 gulp-ruby-sass 1.0.0-alpha。它使用 gulp 源映射，应避免此问题的所有迭代。

没有找到相关文章