vue中使用 px2rem 同時引入第三方庫的時候第三方庫的ui 樣式也變成rem 導(dǎo)致錯亂請問如何解決？

vue中使用 px2rem 同時引入第三方庫的時候第三方庫的ui 樣式也變成rem 導(dǎo)致錯亂請問如何解決？
引入exclude 之后報錯，現(xiàn)在困在這里了。
圖片描述

回答

編輯回答

茍活

flexable.js 和安裝第三方ui庫以及px2rem 第三方?jīng)_突，引起第三方庫無法使用的問題

npm install lib-flexible--save- dev npm install px2rem --save -dev
main.js 中引入 import 'lib-flexible' 在 /build/unit.js 中加入

var px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75     // 750的設(shè)計圖
  }
}

  //把剛加的loader注冊進去 
 const loaders = options.usePostCSS ? [cssLoader,     postcssLoader,px2remLoader] : [cssLoader]
 //const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

然后直接再css 文件里面寫設(shè)計圖上的px單位，會自動轉(zhuǎn)換成rem，同步出現(xiàn)的問題，是ui庫上的css 文件也被轉(zhuǎn)換成rem ，導(dǎo)致樣式變亂

變小的主要原因是第三庫 css一依據(jù) data-dpr="1" 時寫的尺寸

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

這時我們使用的flexible引入時 data-dpr不是一個寫死了的，是一個動態(tài)的；就導(dǎo)致這個問題

解決辦法

我們可以把第三方庫的css代碼px統(tǒng)一擴大2倍，聽起來很蠢對吧，我一開始也是折磨想的，有的小伙伴就該說這個的改多少，代碼少就無所謂，可是代碼不就的累死了。。。
我使用的地vscode這個編輯器有個擴展程序小叫 px-to-rem 這個可算是救世主了他可以讓你在2分鐘改完所有的代碼

下載改默認配置 (路徑：/Application Support/Code/User/settings.json)

"px-to-rem.px-per-rem": 0.5, // 第一步主要是讓1rem 等于0.5px
全選你要改的代碼 option+Z 快捷鍵。（windows我不知道）你會發(fā)現(xiàn)所有的px變rem

改默認配置

"px-to-rem.px-per-rem": 1, //第二步
然后在全選你要改的代碼 option+Z 快捷鍵。你會發(fā)現(xiàn)所有的rem變px 這個px的值比是原來的2倍

將修改后的css文件引入

2018年8月18日 16:38

編輯回答

故林

我用的是postcss-post， iview，在node——modules 下找到postcss-pxtorem/indedx.js

'use strict';

var postcss = require('postcss');
var objectAssign = require('object-assign');
var pxRegex = require('./lib/pixel-unit-regex');
var filterPropList = require('./lib/filter-prop-list');

var defaults = {
    rootValue: 16,
    unitPrecision: 5,
    selectorBlackList: [],
    propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
    replace: true,
    mediaQuery: false,
    minPixelValue: 0
};

var legacyOptions = {
    'root_value': 'rootValue',
    'unit_precision': 'unitPrecision',
    'selector_black_list': 'selectorBlackList',
    'prop_white_list': 'propList',
    'media_query': 'mediaQuery',
    'propWhiteList': 'propList'
};

module.exports = postcss.plugin('postcss-pxtorem', function (options) {

    convertLegacyOptions(options);

    var opts = objectAssign({}, defaults, options);
    var pxReplace = createPxReplace(opts.rootValue, opts.unitPrecision, opts.minPixelValue);

    var satisfyPropList = createPropListMatcher(opts.propList);

    return function (css) {

        css.walkDecls(function (decl) {
            if (/ivu-/g.test(decl.parent.selector)) {
                if (decl.value.indexOf('px') === -1) return;
                let vlist = decl.value.split(" ")
                for(let j = 0; j < vlist.length; j++) {
                    if (vlist[j].indexOf('px') === -1) continue
                    let num = parseInt(vlist[j].match(/\d+px/g)[0].replace('px', '')) * 2
                    vlist[j] = vlist[j].replace(/\d+px/g, num.toString() + 'px')
                }
                let v = vlist.join(' ')
                decl.value = v
            }
        })

        css.walkDecls(function (decl, i) {

            // This should be the fastest test and will remove most declarations
            if (decl.value.indexOf('px') === -1) return;

            if (!satisfyPropList(decl.prop)) return;

            if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return;

            var value = decl.value.replace(pxRegex, pxReplace);
            // if rem unit already exists, do not add or replace
            if (declarationExists(decl.parent, decl.prop, value)) return;

            if (opts.replace) {
                decl.value = value;
            } else {
                decl.parent.insertAfter(i, decl.clone({ value: value }));
            }
        });

        if (opts.mediaQuery) {
            css.walkAtRules('media', function (rule) {
                if (rule.params.indexOf('px') === -1) return;
                rule.params = rule.params.replace(pxRegex, pxReplace);
            });
        }

    };
});

function convertLegacyOptions(options) {
    if (typeof options !== 'object') return;
    if (
            (
                (typeof options['prop_white_list'] !== 'undefined' && options['prop_white_list'].length === 0) ||
                (typeof options.propWhiteList !== 'undefined' && options.propWhiteList.length === 0)
            ) &&
            typeof options.propList === 'undefined'
        ) {
        options.propList = ['*'];
        delete options['prop_white_list'];
        delete options.propWhiteList;
    }
    Object.keys(legacyOptions).forEach(function (key) {
        if (options.hasOwnProperty(key)) {
            options[legacyOptions[key]] = options[key];
            delete options[key];
        }
    });
}

function createPxReplace (rootValue, unitPrecision, minPixelValue) {
    return function (m, $1) {
        if (!$1) return m;
        var pixels = parseFloat($1);
        if (pixels < minPixelValue) return m;
        var fixedVal = toFixed((pixels / rootValue), unitPrecision);
        return (fixedVal === 0) ? '0' : fixedVal + 'rem';
    };
}

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

function declarationExists(decls, prop, value) {
    return decls.some(function (decl) {
        return (decl.prop === prop && decl.value === value);
    });
}

function blacklistedSelector(blacklist, selector) {
    if (typeof selector !== 'string') return;
    return blacklist.some(function (regex) {
        if (typeof regex === 'string') return selector.indexOf(regex) !== -1;
        return selector.match(regex);
    });
}

function createPropListMatcher(propList) {
    var hasWild = propList.indexOf('*') > -1;
    var matchAll = (hasWild && propList.length === 1);
    var lists = {
        exact: filterPropList.exact(propList),
        contain: filterPropList.contain(propList),
        startWith: filterPropList.startWith(propList),
        endWith: filterPropList.endWith(propList),
        notExact: filterPropList.notExact(propList),
        notContain: filterPropList.notContain(propList),
        notStartWith: filterPropList.notStartWith(propList),
        notEndWith: filterPropList.notEndWith(propList)
    };
    return function (prop) {
        if (matchAll) return true;
        return (
            (
                hasWild ||
                lists.exact.indexOf(prop) > -1 ||
                lists.contain.some(function (m) {
                    return prop.indexOf(m) > -1;
                }) ||
                lists.startWith.some(function (m) {
                    return prop.indexOf(m) === 0;
                }) ||
                lists.endWith.some(function (m) {
                    return prop.indexOf(m) === prop.length - m.length;
                })
            ) &&
            !(
                lists.notExact.indexOf(prop) > -1 ||
                lists.notContain.some(function (m) {
                    return prop.indexOf(m) > -1;
                }) ||
                lists.notStartWith.some(function (m) {
                    return prop.indexOf(m) === 0;
                }) ||
                lists.notEndWith.some(function (m) {
                    return prop.indexOf(m) === prop.length - m.length;
                })
            )
        );
    };
}

添加

css.walkDecls(function (decl) {
            if (/ivu-/g.test(decl.parent.selector)) {
                if (decl.value.indexOf('px') === -1) return;
                let vlist = decl.value.split(" ")
                for(let j = 0; j < vlist.length; j++) {
                    if (vlist[j].indexOf('px') === -1) continue
                    let num = parseInt(vlist[j].match(/\d+px/g)[0].replace('px', '')) * 2
                    vlist[j] = vlist[j].replace(/\d+px/g, num.toString() + 'px')
                }
                let v = vlist.join(' ')
                decl.value = v
            }
        })

代碼可以自己再修改一下，/ivu-/g.替換別的ui框架前綴， * 2 替換設(shè)計稿的倍數(shù)

上面方法適合dpr動態(tài)的情況下，還有一種方法把dpr寫死1

然后再postcss-pxtorem 的配置 .postcss.js

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {browsers: ['defaults']},
    "postcss-pxtorem": {
      "rootValue": 75,
      "propList": ['*', '!border*'],
      // 注意：如果有使用第三方UI如VUX，則需要配置下忽略選擇器不轉(zhuǎn)換。
      // 規(guī)則是class中包含的字符串，如vux中所有的class前綴都是weui-。也可以是正則。
      "selectorBlackList": ['ivu-']
    }
  }
}

因為ui框架一般都是在dpr=1下，然后把第三方樣式過濾不轉(zhuǎn)換rem

2018年5月24日 18:13

編輯回答