Question

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的内容-并尝试使用它，但是结果是相同的-错误

Answer 1

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

需要在 ass

之后设置

Answer 2

根据@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可能会将变量应用于属性值。如果是这样，它们可以包含可能需要供应商前缀的值。因此是要求。

Gulp Sass无法使用＃{$ i}标签进行循环编译

2 个答案: