Sass 如何在不编译为css的情况下使用post css自动刷新SCS？

我有一个使用Jekyll生成的静态站点

目录结构：

| _sass/
|---| subfolder/
|---|---| _component-1.scss  
|---|---| _component-2.scss  etc
| css/
|---| main.scss
| _site/
|---| css/
|---|---| main.css

main.scss

将我的所有scss组件导入一个文件，Jekyll将scss编译到“源”目录（生成静态站点的地方）-

\u site

我想在我的SCSS组件上使用自动刷新器。有一些Jekyll插件可以做到这一点，但是我将站点托管在GitHub页面上，出于安全原因，这会禁用插件。我可以在本地使用插件，然后将

\u站点

目录推送到GitHub，但我不想使用这个选项

我想使用一个Gulp任务来自动刷新我的SCSS组件，而不必首先将SCSS编译成CSS。我想在我的Gulp构建步骤中简单地实现autoprefix，并让Jekyll构建过程处理SCSS编译

因此，我将Jekyll

\u config.yml

文件中的

sass\u dir

更改为

\u gulped-sass

（或其他）而不是

\u sass

，并尝试了以下gulp任务：

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var source = '_sass/**/*.scss';
var destination = '_gulped-sass';

gulp.task('autoprefixer', function() {   
    gulp.src(source)
    .pipe(autoprefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(gulp.dest(destination));
});

…然而，这会产生错误：

$ gulp autoprefixer
$ error: you tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

好的，那么给出的用法是

var syntax = require('postcss-scss');
postcss(plugins).process(scss, { syntax: syntax }).then(function(result) {
    result.content // SCSS with transformations
});

…并给出以下用途：

gulp.task('css', function () {
var postcss    = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');

return gulp.src('src/**/*.css')
    .pipe( sourcemaps.init() )
    .pipe( postcss([ require('precss'), require('autoprefixer') ]) )
    .pipe( sourcemaps.write('.') )
    .pipe( gulp.dest('build/') );
});

我无法从文档中了解如何在我的Gulp任务中使用postsss-scss解析器。我尝试了文档中两个示例的许多不同组合，但都不起作用

---

那么，我如何在我的Gulp任务中使用post-css和/或post-scs，以便在不将其编译为css的情况下自动刷新我的scs呢？

解决了这个问题。post-scss解析器（不是插件）可以指定为对象的

语法
属性，该属性作为第二个参数传递给
postsss
函数。它开始看起来很凌乱，但它起作用了：

var gulp = require('gulp');
var source = '_sass/**/*.scss';
var destination = '_gulped-sass';

var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');

gulp.task('autoprefixer', function () {
    return gulp.src(source)
        .pipe(postcss([autoprefixer({
            browsers: ['last 2 versions']
        })], {
            syntax: require('postcss-scss')
        }))
        .pipe(gulp.dest(destination));
});

遇到了同样的问题，发现这很有帮助。不幸的是，截至2020年3月14日，这对我不起作用。尝试复制您的确切管道，而SCS组合时，它不应用任何前缀。在没有编译的情况下，很难找到有关如何前缀和多填充SCS的信息。