如何在不编译为 CSS 的情况下使用 post-css 自动添加 SCSS 前缀？

Question

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

目录结构：

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

main.scss 将我所有的 SCSS 组件导入到一个文件中，Jekyll 将 SCSS 编译到 'source' 目录（生成静态站点的位置） - _site.

我想在我的 SCSS 组件上使用自动前缀。有 Jekyll 插件可以执行此操作，但是我在 GitHub 页面上托管站点，出于安全原因禁用插件。我可以在本地使用插件，然后将 _site 目录推送到 GitHub，但我不想使用此选项。

我想使用 Gulp 任务自动为我的 SCSS 组件添加前缀，而无需先将 SCSS 编译为 CSS。我想在我的 Gulp 构建步骤中简单地自动添加前缀，并让 Jekyll 构建过程负责 SCSS 编译。

所以我将 Jekyll _config.yml 文件中的 sass_dir 更改为 _gulped-sass（或其他）而不是 _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

好的，所以the docs for post-scss给出的用法为

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

..而 docs for post-css 给出的用法为：

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 任务中使用 postcss-scss 解析器。我尝试了文档中两个示例的许多不同组合，但 none 有效。

那么，如何在我的 Gulp 任务中使用 post-css and/or post-scss autoprefix 我的 SCSS 而无需 将其编译为 CSS?

Answer 1

想通了。 post-scss parser（非插件）可以指定为作为第二个参数传递给 [=] 的对象的 syntax 属性 12=] 函数。它开始看起来真的很乱，但它确实有效：

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));
});

如何在不编译为 CSS 的情况下使用 post-css 自动添加 SCSS 前缀？

How do I use post-css to autoprefix SCSS without compiling to CSS?

sass

jekyll

gulp

postcss