PostCSS：PxToRem 插件

Question

我非常使用 Node.js 和 post 处理器用于 CSS。在阅读了几篇文章后，我设法安装了以下内容：

Node.js（包括 npm）
Gulp
PostCSS
Pxtorem（PostCSS 插件 Gulp）

我想做的是让 'pxtorem' 插件将我的像素单位转换为以下 CSS 属性的 rems：字体大小、边距、填充、边框、宽度、高度等. 并在新的 CSS 样式表中输出结果。

问题： 我需要在 gulpfile.js 中输入什么才能使这项工作正常进行？

重申一下，在输入变量和要求方面我是全新的，并且一直在关注视频和博客示例，none 其中特别具有将像素转换为 rems 的正确公式（因为有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'));
});

上面的内容实际上是获取位于 "css-1" 文件夹中的 "styles-1.css" 样式表文件，并在 "dest" 文件夹中复制它。我按照我正在阅读的一篇文章输入了这段代码，以了解 PostCSS 是如何工作的，但它显然不是将像素转换为 rem 的正确代码。

P.S。我目前正在使用 Windows 10 O/S.

Answer 1

根据 gulp-pxtorem 的文档，它指出：

Options

Pass in two option objects. The first one for postcss-pxtorem options...

访问 postcss-pxtorem 的文档后，我发现选项块如下所示：

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

这很容易解释，但如果您需要了解每个选项的作用，可以在文档中阅读更多内容。你想要的选项是 propWhiteList.

因此，在您的 gulpfile 中：

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'));
});

我认为您不需要使用第二个选项来达到您想要的结果。

祝你好运，编码愉快！

PostCSS：PxToRem 插件

PostCSS: PxToRem plugin

css

node.js

gulp

postcss