postcss / precss-将.scss转换为.css

问题描述

我正在用gulp进行postcss / precss转换，以将我的scss标记转换为有效的CSS。这是我的gulpfile.js：

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var precss = require('precss');
var watch = require('gulp-watch');

gulp.task('stream',function () {
  var processors = [
    precss
  ];
    return watch('src/*.css',{ ignoreInitial: false })
        .pipe(postcss(processors))
        .pipe(gulp.dest('dest'));
});

gulp.task('default',gulp.parallel('stream'));

问题是它不会更改文件扩展名，因此我需要在* .css文件中编写scss，而我想做的是将其设置为从* .scss文件读取scss并将其输出到* .css文件。有人可以告诉我如何实现吗？

解决方法

这不是专家，所以我只分享我们如何进行sass编译。

我们使用gulp-concat将文件合并为一个.css文件。您的gulp片段如下：

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var precss = require('precss');
var watch = require('gulp-watch');
var concat = require('gulp-concat');

gulp.task('stream',function () {
  var processors = [
    precss
  ];
    return watch('src/*.css',{ ignoreInitial: false })
        .pipe(postcss(processors))
        .pipe(concat('FILENAME.css'))
        .pipe(gulp.dest('dest'));
});

gulp.task('default',gulp.parallel('stream'));

别忘了先做npm install --save-dev gulp-concat！

gulp postcss