css-px2rem-loader v0.0.1

css-px2rem-loader

a webpack loader for css-px2rem

Fork px2rem, add below config which can auto process px unit without /*px*/ and /*no*/ in px2rem

• autoDealPx: 'font-size'
• autoDealNo: 'border-radius', 'border', 'box-shadow'
• appendAutoDealPx: []
• appendAutoDealNo: []
• forceRemComment: 'rem'

Install

npm install css-px2rem-loader

webpack config

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.css$/,
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader'
      }, {
        loader: 'px2rem-loader',
        // options here
        options: {
          remUnit: 75,
          remPrecision: 8
        }
      }]
    }]
  }
}

css-px2rem processing result

Pre processing:

One raw stylesheet: test.css

.selector {
  width: 150px;
  height: 64px; /*px*/
  font-size: 28px; //auto generate 3 new size, same effect as /*px*/ comment
  border: 1px solid #ddd; //no deal boeder px, same effect as /*no*/ comment
}

After processing:

Rem version: test.result.css

.selector {
  width: 2rem;
  border: 1px solid #ddd;
}
[media-type="1"] .selector {
  height: 32px;
  font-size: 14px;
}
[media-type="2"] .selector {
  height: 64px;
  font-size: 28px;
}
[media-type="3"] .selector {
  height: 96px;
  font-size: 42px;
}