PostCSS: PxToRem插件

Question

我是，非常熟悉使用Node.js和用于CSS的post处理器。在阅读了几篇文章之后，我成功地安装了以下内容：

1. Node.js (其中包括npm)
2. 大口吞下
3. PostCSS
4. 普托雷姆 (用于Gulp的PostCSS插件)

我想做的是让'pxtorem‘插件将我的px单元转换为rems，用于以下CSS属性:字体大小、边距、填充、边框、宽度、高度等，并输出新CSS样式表中的结果。

问题：，我需要在gulpfile.js中输入什么才能使它工作？

重申一下，在输入变量和需求方面，我是全新的，并且一直在跟踪视频和博客示例，其中没有一个具体地有将像素转换为rem的正确公式(因为PostCSS有很多插件)。

这就是我当前的gulpfile.js中的内容：

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtorem = require('gulp-pxtorem');

gulp.task('css', function() {
gulp.src('./css-1/*.css')
    .pipe(pxtorem())
    .pipe(gulp.dest('./dest'));
});

上面所做的本质上是抓取我的“样式-1.css”样式表文件位于我的"css-1“文件夹中，并在我的”最“文件夹中复制它。为了了解PostCSS是如何工作的，我按照我正在读的一篇文章输入了这段代码，但它显然不是将像素转换为rem的正确代码。

我目前使用的是Windows 10 O/S。

Answer 1

根据吞咽的文档，它声明：

Options 传入两个选项对象。第一种是后置选择.

在访问了pxtorem的文档之后，我发现options块如下所示：

{
    rootValue: 16,
    unitPrecision: 5,
    propWhiteList: ['font', 'font-size', 'line-height', 'letter-spacing'],
    selectorBlackList: [],
    replace: true,
    mediaQuery: false,
    minPixelValue: 0
}

这是相当不言自明的，但如果您需要知道每个选项都做了什么，您可以在文档中阅读更多内容。您想要的选项是propWhiteList。

所以，在你的档案里：

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtorem = require('gulp-pxtorem');

gulp.task('css', function() {
    var opts = {
        propWhiteList: [
          'font-size',
          'margin',
          'padding',
          'border',
          'width',
          'height',
          ...etc
        ] 
    };
    gulp.src('./css-1/*.css')
        .pipe(pxtorem(opts))
        .pipe(gulp.dest('./dest'));
});

我不认为你需要用第二个选择来达到你想要的结果。

，祝你好运，编码愉快！