sass - 液体溢出时出错(gulp-sass，shopify)

Question

我试图用 interpolate (#{' '}) 转义流动语法，但我收到了这个错误:

[22:07:05] Starting 'scss'...
[22:07:05] Finished 'scss' after 9.77 ms
[22:07:05] [gulp-sass] stylesheets/main.css
527:10  Invalid CSS after "  color: {": expected "}", was "ttings.color-te..."

当我从代码中删除所有流式语法时，任务运行完美。这是 scss 任务:

var gulp = require('gulp');
var watch = require('gulp-watch');
var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');
var rename = require("gulp-rename");
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('scss', function() {
    gulp.src('stylesheets/*.scss')
      .pipe(sass({ includePaths : ['./stylesheets/**/*.scss'] }))
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.init())
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(cssnano())
    .pipe(rename({ suffix: '.min.css', extname: '.liquid' }))
    .pipe(gulp.dest('./assets'));
  });
  gulp.task('watch', function() {
     gulp.watch('stylesheets/**/*.scss', ['scss']);
  });

如果我删除这部分>

 .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.init())
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(cssnano())

任务运行正常，但上传到 shopify 时出现问题(上传请求无效错误!) ...我也在另一个任务中使用 shopify-upload。

Answer 1

删除“autoprefixer”和/或“cssnano”