css - PostCSS:PxToRem 插件

Question

我对使用 Node.js 和使用 CSS 后处理器非常不熟悉。阅读了几篇文章后，我设法安装了以下内容:

1. Node.js(包括 npm)
2. 咕噜咕噜
3. > PostCSS
4. > Pxtorem (Gulp 的 PostCSS 插件)

我想做的是让“pxtorem”插件将我的 px 单位转换为以下 CSS 属性的 rems:字体大小、边距、填充、边框、宽度、高度等，然后将结果输出到新的 CSS 样式表。

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

重申一下，在输入变量和要求方面我是全新的，并且一直在关注视频和博客示例，其中没有一个具体具有将像素转换为 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 的正确代码。

附言我目前使用的是 Windows 10 操作系统。

Answer 1

基于 gulp-pxtorem 的文档，它指出:

Options

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

访问 postcss-pxtorem 的文档后，我发现选项 block 看起来像这样:

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

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

祝你好运，编码愉快!