資訊專欄INFORMATION COLUMN
摘要：如何在中使用在中。先上代碼，的配置如下?lián)Q算的基數(shù)忽略轉(zhuǎn)換正則匹配項如果是使用，都差不多換算的基數(shù)記得安裝包可能遇到的坑插件會轉(zhuǎn)化所有的樣式的。比如引入了三方，也會被轉(zhuǎn)化。目前我使用字段，來過濾?？梢院唵蔚氖褂么髮懙幕颉?/p>
如何在vue-cli3.0中使用 postcss-pxtorem
在vue-cli3.0中。去掉了build和config文件夾。所有的配置都放到了vue.config.js中。
先上代碼，vue.config.js的配置如下
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
require("postcss-pxtorem")({
rootValue : 1, // 換算的基數(shù)
selectorBlackList : ["weui","mu"], // 忽略轉(zhuǎn)換正則匹配項
propList : ["*"],
}),
]
}
}
},
}
如果是使用 postcss-px2rem，都差不多
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
require("postcss-px2rem")({remUnit: 30}), // 換算的基數(shù)
]
}
}
},
}
記得npm i 安裝包；
可能遇到的坑：
插件會轉(zhuǎn)化所有的樣式的px。比如引入了三方UI，也會被轉(zhuǎn)化。目前我使用 selectorBlackList字段，來過濾。但是感覺不太靠譜。如果有更好的辦法歡迎大佬補充
如果個別地方不想轉(zhuǎn)化px?？梢院唵蔚氖褂么髮懙?PX 或 Px 。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/97735.html
摘要：通過配置規(guī)則和單位使用或來解決。其他關(guān)于我個人的一系列學(xué)習(xí)介紹及總結(jié)有興趣可以參閱自學(xué)筆記一安裝使用篇自學(xué)筆記二插件篇自學(xué)筆記二番外篇一自學(xué)筆記二番外篇二 利用PostCSS解決移動端REM適配問題 上一期有提到結(jié)合postcss-px2rem插件來處理移動端適配的方案，以及相關(guān)的避坑方法，之后總覺得這個解決方案問題太多，也就誕生了另一套方案運用postcss-pxtorem插件來進行...
摘要：安裝插件在終端執(zhí)行在中配置使用適配倍屏，倍屏的封裝的將根據(jù)已有的標(biāo)簽來設(shè)置縮放比例下，對于和的屏，用倍的方案，其余的用倍方案其他設(shè)備下，仍舊使用倍的方案在入口文件中引入在中就可以愉快的編寫啦，使用，下面上傳 1.安裝插件postcss-px2rem在終端執(zhí)行：npm install postcss-px2rem --save2.在build/vue-loader.conf.js 中配置...
摘要：項目問題總結(jié)這個項目，很簡單，前端使用，后端使用進行開發(fā)。方便移動端開發(fā)。當(dāng)動畫結(jié)束后，有一個鉤子函數(shù)可以使用其他一些功能組件，都是自己嘗試去編寫的，像日歷組件組件組件等。版本的，是沒有任何的鉤子函數(shù)，我就感覺懵逼了。。。 todo-list 項目問題總結(jié) 這個 todo-list 項目，很簡單，前端使用 react，后端 nodejs 使用 koa2 進行開發(fā)。數(shù)據(jù)庫使用 Mysql...
摘要：基于搭建的前端模板，本倉庫，即可搭建完成一個新項目的基礎(chǔ)模板，源碼地址，歡迎或特性預(yù)編譯語言，做了一定的封裝，詳見雪碧圖移動的適配方案引入了及，可以自由地用去開發(fā)常用的工具類引用全局注入相關(guān)的文件，如通用的及等常用的的集合支持 基于 vue-cli3 搭建的前端模板，clone 本倉庫，即可搭建完成一個新項目的基礎(chǔ)模板，源碼地址，歡迎 star 或 fork 特性 CSS 預(yù)編譯語言...
閱讀 924·2021-09-22 15:18
閱讀 1304·2021-09-09 09:33
閱讀 2850·2019-08-30 10:56
閱讀 1349·2019-08-29 16:30
閱讀 1582·2019-08-29 13:02
閱讀 1541·2019-08-26 13:55
閱讀 1773·2019-08-26 13:41
閱讀 2067·2019-08-26 11:56
