vue移动端滴滴cubeui和postcss-pxtorem插件的rem混合使用,不影响UI的px

我用的是postcss-post，cube，在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 (/cube-/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; }) ) ); }; }

复制进去

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

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，则需要配置下忽略选择器不转换。 // 规则是class中包含的字符串，如vux中所有的class前缀都是weui-。也可以是正则。 “selectorBlackList”: [‘cube-’] } } }

最后一步在吧

name=“viewport” content=“width=device-width,initial-scale=0.5”>改成0.5 OK 这就不影响开发了

vue移动端滴滴cubeui和postcss-pxtorem插件的rem混合使用,不影响UI的px相关推荐

【vue】滴滴cube-ui 简化安装
cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.我主要是想使用它的upload和recyclelist! (1)首先创建一个vue项目 vue init webpack ...
5 款最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐
本文完整版:<最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐> Vue 移动端 UI 组件库推荐 Vant 3 - 有赞移动 UI 组件库,支持 Vue 3 微信小程序 ...
vue 移动端PC端选用的ui框架
1.pc端的项目,最好的选择是ElementUI.(pc端) 一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库.Element是饿了么前端开源维护的Vue UI组件库,更新频率 ...
Vue 移动端UI组件库
1. vonic vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约. 文档 | github地址 | 在线预览 2. vux vux 基于We ...
Vue移动端UI组件库
1. vonic vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约. 中文文档 | github地址 | 在线预览 image 2. vux ...
Vue 服务端渲染原理拆分成三步个步骤简单的实现一个案例
前言可能我们平常接触比较多的是使用 vue + vue全家桶来搭建起一个单页(SPA)应用.用服务端渲染搭建项目比较少,本文是记录我在学习服务端渲染过程中的一些见解,如有出错或疏漏,麻烦帮忙 ...
Vue 移动端、PC 端适配
Vue 移动端.PC 端适配可以使用 lib-flexible.amfe-flexible.postcss-pxtorem.postcss-px2rem 和 postcss-px-to-viewpor ...
vue移动端自适应布局
vue移动端自适应布局根据postcss-pxtorem来实现自动渲染px至rem,不用再进行手动计算一.实现方式 postcss-pxtorem:将px转换为rem: amfe-flexible ...
vue服务端渲染 MySQL_Vue 服务端渲染
关于 vue 做服务端渲染,目前主要有俩种解决方案,使用 vue-server-renderer 或者使用 nuxt .但个人感觉使用 nuxt 写法太死,以及即使你用 nuxt 写出了 vue ss ...

vue移动端滴滴cubeui和postcss-pxtorem插件的rem混合使用,不影响UI的px

vue移动端滴滴cubeui和postcss-pxtorem插件的rem混合使用,不影响UI的px相关推荐

最新文章

热门文章