Gulp任务:向postCSS发送gulp-sass,但不执行任何操作

vptzau2j  于 2022-12-08  发布在  Gulp
关注(0)|答案(1)|浏览(210)

我努力想:
1.将供应商前缀添加到SCSS
1.编译为CSS
1.缩小
使用此大口代码:

const {src,dest} = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('autoprefixer');
const sourcemaps= require('gulp-sourcemaps');
const postcss = require('gulp-postcss')
const postcssScss = require('postcss-scss') 

function genCSS() {
  return src(tpath.src.scss)
    .pipe(sourcemaps.init()) //line in css, maps to source (file & line).
    .pipe(postcss({plugins:[autoprefixer()], syntax:require('postcss-scss')}))
    .pipe(sass.sync({outputStyle:'compressed'}).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(dest(tpath.dest.scss)) //single index.css file
};

exports.genCSS=genCSS

但这是postCSS记录的内容,而且确实如此:
您没有设置任何插件、解析器或字符串化器。现在,PostCSS不执行任何操作。请在https://www.postcss.parts/上为您的案例选择插件,并在postcss.config.js中使用它们。
在链接的页面上:https://www.postcss.parts/,有Sass插件,但这不是一个编译器,所以我很困惑。
什么是错误,如何解决?

qyzbxkaa

qyzbxkaa1#

这是

.pipe(postcss([autoprefixer()],{syntax:'postcss-scss'}))

应为:

.pipe(postcss([autoprefixer()],{syntax:'postcss-scss'}))

一些细节:

  • 如果存在配置文件,请从postcss({...})中删除选项
  • 在函数参数上不使用postcss-scss(但必须导入),它运行得更快,如下所示:
const postcssScss = require('postcss-scss') //keep this

.pipe(postcss([autoprefixer()])) //removed here

您可以添加cssnano并删除outputStyle:compressed,但这会比较慢(加载额外的包)。

相关问题