Gulp sass 不编译带有 #{$i} 标签的循环答案

【问题标题】：Gulp sass not compiling for loop with #{$i} tagGulp sass 不编译带有 #{$i} 标签的循环
【发布时间】：2019-09-13 12:18:35
【问题描述】：

Gulp sass 有问题，它没有编译我的文件。

Unknown word You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

代码css：

@for $i from 1 through 12 {
    .col-#{$i} {
        -ms-flex-preferred-size: (100% / 12) * $i;
        -webkit-flex-basis: (100% / 12) * $i;
        flex-basis: (100% / 12) * $i;
        max-width: (100% / 12) * $i;
    }
}

代码一饮而尽：

gulp.task( 'sass', function() {
    return gulp.src( SOURCEPATHS.sassSource )
        .pipe( autoprefixer({ browsers: ['last 2 versions']} ) )
        .pipe( sass({ includePaths: ['node_modules'] }, { outputStyle: 'compressed' }).on('error', sass.logError) )
        .pipe( mmq({ log: false }) )
        .pipe( cssmin() )
        .pipe( rename({suffix: '.min'}) )
        .pipe( gulp.dest(APPPATH.css) );
});

这个标签错误 #{$i} - 没有这个 - gulp 编译 css 文件。

可能有问题？我已经阅读了很多关于 gulp-postcss - 并尝试使用它，但结果是一样的 - 错误

【问题讨论】：

错误很明显。在 sass 之后运行 autoprefixer 和其他 postcss 插件。
谢谢 - 问题解决了。您可以提交答案。

标签： npm sass gulp

【解决方案1】：

根据@TheDancingCode 的评论，我的解决方法是在 SASS 之后运行 AutoPrefixer。

“在 sass 之后运行 autoprefixer 和其他 postcss 插件”

gulp.task("sass", function () {
    return gulp.src([`${paths.scss}**/*.scss`, `!${paths.scss}vendor/**/*`])
        .pipe(sourcemaps.init())
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(paths.contentRoot));

现在这对我来说似乎很明显，因为 SASS 可能会将变量应用于属性值。如果是这样，它们可以包含可能需要以供应商为前缀的值。因此有这个要求。

【讨论】：

【解决方案2】：

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

需要在sass

之后设置

【讨论】：