0

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

  1. Node.js（包括 npm）
  2. 吞咽
  3. 后CSS
  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 的正确代码。

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

4

1 回答 1

0

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

选项

传入两个选项对象。postcss-pxtorem 选项的第一个...

在访问了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'));
});

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

祝你好运，编码愉快！

于 2016-01-12T05:49:02.187 回答