vue項目中使用了vw適配方案,引入第三方ui框架mint-ui時,適配問題解決
阿新 • • 發佈:2019-05-01
== indexof 問題解決 .config .proto NPU 選項 === and
https://www.jianshu.com/p/8f9aab666c4a
4、添加exclude選項,將node_modules目錄排除掉,即不會受影響
問題分析:
一般第三方ui框架用的都是不同的適配方式,如果我們使用了vw適配,那麽在使用mint-ui框架時,就會發現px單位會被轉換成vw,從而導致樣式變小的問題,如圖
解決方案
網上看到了很多種解決方案,這裏推薦第四種
1、重寫第三方組件ui樣式大小
2、在postcss.config.js中的selectorBlackList選項中增加不需要vw轉換的類名
selectorBlackList: [‘.ignore‘, ‘.hairlines‘], // (Array) The selectors to ignore and leave as px.
3、使用rem適配方案,將原本750的寬度設置為一半,配置成37.5
4、添加exclude選項,將node_modules目錄排除掉,即不會受影響
在node_mudule中找到postcss-px-to-viewport,修改index.js新增對exclude選項的處理
module.exports = postcss.plugin('postcss-px-to-viewport', function (options) { var opts = objectAssign({}, defaults, options); var pxReplace = createPxReplace(opts.viewportWidth, opts.minPixelValue, opts.unitPrecision, opts.viewportUnit); return function (css) { css.walkDecls(function (decl, i) { if (options.exclude) { // 添加對exclude選項的處理 if (Object.prototype.toString.call(options.exclude) !== '[object RegExp]') { throw new Error('options.exclude should be RegExp!') } if (decl.source.input.file.match(options.exclude) !== null) return; } // This should be the fastest test and will remove most declarations if (decl.value.indexOf('px') === -1) return; if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return; decl.value = decl.value.replace(pxRegex, pxReplace); }); if (opts.mediaQuery) { css.walkAtRules('media', function (rule) { if (rule.params.indexOf('px') === -1) return; rule.params = rule.params.replace(pxRegex, pxReplace); }); } }; });
然後在.postcssrc.js添加postcss-px-to-viewport的exclude選項
"postcss-px-to-viewport": { viewportWidth: 750, viewportHeight: 1334, unitPrecision: 3, viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines'], minPixelValue: 1, mediaQuery: false, exclude: /(\/|\\)(node_modules)(\/|\\)/ },
這裏需要註意了,在沒有修改postcss-px-to-viewport的index.js文件,直接在.postcssrc.js中添加了以下代碼也成功了
exclude: /(\/|\\)(node_modules)(\/|\\)/
然後我去node_mudele下找到postcss-px-to-viewport的index.js打開發現了如下代碼,看來是postcss-px-to-viewpor這個插件增加了對這個問題的處理, 我使用的版本是"postcss-px-to-viewport": "^1.1.0",
if (opts.exclude && file) {
if (Object.prototype.toString.call(opts.exclude) === '[object RegExp]') {
if (isExclude(opts.exclude, file)) return;
} else if (Object.prototype.toString.call(opts.exclude) === '[object Array]') {
for (let i = 0; i < opts.exclude.length; i++) {
if (isExclude(opts.exclude[i], file)) return;
}
} else {
throw new Error('options.exclude should be RegExp or Array.');
}
}
參考閱讀
Vue+ts下的移動端vw適配(第三方庫css問題)
vue項目中使用了vw適配方案,引入第三方ui框架mint-ui時,適配問題解決