如何使用自动供应商前缀将 SCSS 转换为 CSS？答案

【问题标题】：How to convert SCSS to CSS with auto vendor prefixer?如何使用自动供应商前缀将 SCSS 转换为 CSS？
【发布时间】：2019-06-20 19:35:03
【问题描述】：

有没有办法将 SCSS 转换为带有自动供应商前缀的 CSS？我已将 node-sass 与 npm 一起使用，它运行良好，但它不会自动呈现供应商前缀（如 box-sizing: border-box; 或 display: flex; 属性）

注意：我使用了 sass 编译器扩展 VS Code，但它在我不想要的 SCSS 文件的同一目录中渲染 CSS 和 CSS.MAP 文件。

【问题讨论】：

您可以在 webpack 中使用 postcss.org autoprefixer 和 node-sass 来配置您想要输出文件的位置
完美运行.. 我正在使用gulp-postcss 和gulp-sourcemaps。 gulp.task('css', () => { const postcss = require('gulp-postcss') const 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/') ) })
如果这是答案，那么您可以回答自己的问题。这也将帮助其他用户
哦，当然！我是新手，谢谢提醒！

标签： css node.js npm sass

【解决方案1】：

你可以使用这样的东西 https://autoprefixer.github.io/

【讨论】：

它可以工作，但是您必须执行额外的步骤，首先将您的 SCSS 转换为 CSS，然后将您的代码放入在线转换器中。 postcss.org 适用于我的工作流程。
有很多自动前缀的 npm 包你可以尝试一个

【解决方案2】：

我发现postcss 工作得很好。我正在这样做：

吞咽

使用gulp-postcss 和gulp-sourcemaps。

gulp.task('css', () => {
  const postcss    = require('gulp-postcss')
  const 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/') )
})

请参考本页：usage

【讨论】：