vue2.0 样式 px转 rem

一、安装插件

1、安装  postcss-pxtorem 组件

class 中的样式转换

yarn add postcss-pxtorem@5.1.1

2、在 src 同等目录中，新增文件 style-px-to-rem.js

标签行内style 兼容 tailwindcss （代码简单就不提交到npm上了）

// 行内样式 px 转成 rem
const loaderUtils = require('loader-utils')
// 默认参数
let defaultsProp = {
    rootValue: 16,
    unitPrecision: 5,
    minPixelValue: 1
}
const template = /<template>([\s\S]+)<\/template>/gi
// const checkContent = /(\d+)\s*px(?![\w-]*[\s\])-])/g;
const checkContent = /(\d+)\s*px(?![\w-]*\s*])/g;
const checkStyle = /style="[^"]*"/g;

module.exports = function (source) {
    const opts = loaderUtils.getOptions(this)
    const defaults = Object.assign({}, defaultsProp, opts)
    let _source = ''
    if (template.test(source)) {
        _source = source.match(template)[0]
    }
    let pxGlobalRegExp = new RegExp(checkContent.source, 'ig')
    if (pxGlobalRegExp.test(_source)) {
        let $_source = source.replace(checkStyle, function(match) {
            return match.replace(pxGlobalRegExp, createPxReplace(defaults.rootValue, defaults.unitPrecision, defaults.minPixelValue))
        });
        return source.replace(template, $_source)
    } else {
        return source
    }
}
function createPxReplace(rootValue, unitPrecision, minPixelValue) {
    return (m, $1) => {
        if (!$1) return m;
        const pixels = parseFloat($1);
        if (pixels < minPixelValue) return m;
        const fixedVal = toFixed(pixels / rootValue, unitPrecision);
        return fixedVal === 0 ? "0" : fixedVal + "rem";
    };
}

function toFixed(number, precision) {
    const multiplier = Math.pow(10, precision + 1),
        wholeNumber = Math.floor(number * multiplier);
    return (Math.round(wholeNumber / 10) * 10) / multiplier;
}

二、使用

vue.config.js 文件引入使用

module.exports = {
  // 引入自定义插件
  chainWebpack: (config) => {
    config.module
        .rule('vue')
        .test(/\.vue$/)
        .use('./style-px-to-rem')
        .loader('./style-px-to-rem')
        .options({
          rootValue: 16, // 换算的基数
        })
  },
  // 使用 postcss-pxtorem
  css:{
    loaderOptions:{
      sass:{
          //给sass-loader传递选项
      },
      css:{
          //给css-loader传递选项
      },
      postcss:{
        postcssOptions: {
          //给postcss-loader传递选项
          plugins: [
            require('postcss-pxtorem')({
              rootValue: 16, // 换算的基数
              selectorBlackList: [], // 忽略转换正则匹配项 列入一些ui库, ['.el'] 就是忽略elementUI库
              propList: ['*'],
            }),
          ]
        }
      }
    }
  }
}