postcss-auto-rem

一个更快更好用的px到rem的改写插件。编译效率对比如下

/* Input example */
const customInput = `.foo {
  margin: 100px 100px;
  padding: 100px;
  width: 100px;
  font-size: 100px;
}`;

/* Output example */
const customOut = `.foo {
  margin: 1rem 1rem;
  padding: 1rem;
  width: 1rem;
  font-size: 1rem;
}`;
it('test-transfer', async () => {
  await run(customInput, customOut, {})
})

编译耗时：

可见，postcss-auto-rem快2.24倍，工程越大，对开发效率影响越大。

因此从包的体积、配置成本、插件编译效率三点来看，postcss-auto-rem更有优势。

转换方案	编译效率	包大小
postcss-pxtorem	1.807s	约6531B
postcss-auto-rem	0.807s	约839B

使用

1.先下载依赖

npm install postcss-auto-rem -D

无论是vue框架或者react框架，都已经内置了postcss，配置起来非常方便.

2.在各大框架下配置

例如，vue框架，在项目根目录下，有**.postcssrc.js** 或者 postcss.config.js，如果没有就手动创建一个。然后增加一个postcss-auto-rem。配置编译参数，如果配置了size为100，那么，你的代码中是100px，则生成的打包文件中会是1rem。计算方式100px/100=1rem。

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "autoprefixer": {},
+   "postcss-auto-rem": {size: 100},
  }
}

例如，react框架，也已经内置了postcss，配置起来也很方便，根目录下的路径文件config/webpack.config.js，如果没有，则运行npm run eject创建出来。然后配置上postcss-auto-rem，下图中加号。

{
    loader: require.resolve('css-loader'),
    options: cssOptions,
},
{
    loader: require.resolve('postcss-loader'),
    options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
+           require('postcss-auto-rem')({size: 100}),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            postcssNormalize(),
          ],
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
    },
},

例如，Node Api

var fs = require('fs');
var postcss = require('postcss');
var postcssAutoRem = require('postcss-auto-rem');
var css = fs.readFileSync('main.css', 'utf8');
+ var options = {size: 100};
+ var processedCss = postcss(postcssAutoRem(options)).process(css).css;
 
fs.writeFile('auto-rem.css', processedCss, function (err) {
  if (err) {
    throw err;
  }
  console.log('file written.');
});

例如，gulp

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var postcssAutoRem = require('postcss-auto-rem');
 
gulp.task('css', function () {
 
    var processors = [
        autoprefixer({
            browsers: 'last 1 version'
        }),
+       postcssAutoRem({size: 100})
    ];
 
    return gulp.src(['build/css/**/*.css'])
        .pipe(postcss(processors))
        .pipe(gulp.dest('build/css'));
});

若是自己用wepack从零搭建的工程，则参考如下配置

（1）修改css相关rules配置，增加postcss-loader

如果是Webpack下

在webpack.config.js中使用postcss-loader:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
+         {
+           loader: 'postcss-loader'
+         }
        ]
      }
    ]
  }
}

如果是CSS-in-JS

在jsx中使用postcss最好的方式是使用astroturf，添加到你的webpack.config.js中。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'postcss-loader'],
      },
      {
        test: /\.jsx?$/,
+       use: ['babel-loader', 'astroturf/loader'],
      }
    ]
  }
}

（2）新建postcss.config.js文件，输入配置参数

检查你的项目是否存在postcss配置文件，一般位于根目录。

如果没有postcss的相关配置文件，则可以手动创建一个postcss.config.js，在plugins中，添加require(postcss-auto-rem)

module.exports = {

  plugins: [

+   require('postcss-auto-rem')（{size: 100}）,

    require('autoprefixer')

  ]

}

其它介绍

如果你还没有设置根元素的字体像素值，可以用smart-rem来动态设置，不同屏幕大小，就自动重新计算。

用法

npm install smart-rem -S

在入口文件中（例如src/main.js 或 src/index.js）引入，输入设计稿宽度

import smartRem from 'smart-rem'
smartRem(Arguments)

Arguments是设计稿宽度，如果设计稿宽度是750px，则输入750

import smartRem from 'smart-rem'
smartRem(750)