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 sass_dir文件中的_config.yml更改为_gulped-sass（或其他），而不是_sass，并尝试了以下gulp任务：< / p>

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解析器。我已经尝试了文档中两个示例的许多不同组合，但没有一个工作。

那么，如何在我的Gulp任务中使用post-css和/或post-scss来自动修复我的SCSS 而不用将其编译为CSS？

Answer 1

想出来。可以将post-scss 解析器（非插件）指定为作为第二个参数传递给syntax函数的对象的postcss属性。它开始看起来非常混乱，但它确实有效：

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？

1 个答案: