0

Sass から postCSS に移行しようとしていて、postcss-simple-vars gulp プラグインをテストしています。

.scss ファイルで自動的に JavaScript スタイルのコメント (//) を使用する Webstorm IDE を使用しているため、非ブロック コメントはすべて // コメントであり、/* */ ではありません。

postcss-simple-vars は、サイレント オプションが true に設定されていても、すべての // コメントでエラーをスローします。

これが私の一気飲みの仕事です：

gulp.task('postcss', function () {
    return gulp
        .src('./styles/sass2/*.scss')
        .pipe($.postcss(
            [
                vars({
                    silent: true,
                    variables: colors
                })
            ]))
        .pipe(gulp.dest('./dest'));

});

本当に明らかな何かが欠けていますか？postcss-simple-vars に // スタイルのコメントを無視させる方法はありますか?

解決方法:

すべての // コメントを /* */ コメントに置き換えて、gulp-replace ($.replace) に置き換えました。

gulp.task('replace-comments', function() {
    return gulp
        .src(config.scss)
        .pipe($.replace(/\/\/.*/g, function(comment){

            return '/*' + comment.substring(2) + ( '*/');
        }))
        .pipe(gulp.dest('./styles/sass3'));

});
4

1 に答える 1

0

問題は postcss-simple-vars にはありません。postcss のデフォルトのパーサーは標準の CSS を想定しており、//コメントは標準ではありません。コメントはパーサーを壊します。

//postcss を介してコメント付きでコンパイルされていない SCSS を実行するには、別のパーサーpostcss-scssを使用する必要があります。その README とgulp-postcssのドキュメントで、その使用方法を説明する必要があります。

于 2016-01-04T13:56:50.297 に答える