vue-cli3.0 使用 postcss-pxtorem（postcss-px2rem）自動轉換p

時飛發布于2019-08-23 11:57 / 1476人閱讀

摘要：如何在中使用在中。先上代碼，的配置如下換算的基數忽略轉換正則匹配項如果是使用，都差不多換算的基數記得安裝包可能遇到的坑插件會轉化所有的樣式的。比如引入了三方，也會被轉化。目前我使用字段，來過濾。可以簡單的使用大寫的或。

如何在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, // 換算的基數
                        selectorBlackList  : ["weui","mu"], // 忽略轉換正則匹配項
                        propList   : ["*"],
                    }),
                ]
            }
        }
    },
}

如果是使用 postcss-px2rem，都差不多

module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require("postcss-px2rem")({remUnit: 30}), // 換算的基數
                ]
            }
        }
    },
}

記得npm i 安裝包；

可能遇到的坑：

插件會轉化所有的樣式的px。比如引入了三方UI，也會被轉化。目前我使用 selectorBlackList字段，來過濾。但是感覺不太靠譜。如果有更好的辦法歡迎大佬補充

如果個別地方不想轉化px。可以簡單的使用大寫的 PX 或 Px 。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97735.html

PostCSS自學筆記（二）【番外篇一】

摘要：通過配置規則和單位使用或來解決。其他關于我個人的一系列學習介紹及總結有興趣可以參閱自學筆記一安裝使用篇自學筆記二插件篇自學筆記二番外篇一自學筆記二番外篇二利用PostCSS解決移動端REM適配問題上一期有提到結合postcss-px2rem插件來處理移動端適配的方案，以及相關的避坑方法，之后總覺得這個解決方案問題太多，也就誕生了另一套方案運用postcss-pxtorem插件來進行...

Harpsichord1207 2019-08-29 13:17 評論0 收藏0
如何在vue中實現px自動轉換成rem,實現多手機的尺寸適配問題？

摘要：安裝插件在終端執行在中配置使用適配倍屏，倍屏的封裝的將根據已有的標簽來設置縮放比例下，對于和的屏，用倍的方案，其余的用倍方案其他設備下，仍舊使用倍的方案在入口文件中引入在中就可以愉快的編寫啦，使用，下面上傳 1.安裝插件postcss-px2rem在終端執行：npm install postcss-px2rem --save2.在build/vue-loader.conf.js 中配置...

xiaoxiaozi 2019-08-23 15:41 評論0 收藏0
todo-list 項目問題總結（使用 react 進行開發）

摘要：項目問題總結這個項目，很簡單，前端使用，后端使用進行開發。方便移動端開發。當動畫結束后，有一個鉤子函數可以使用其他一些功能組件，都是自己嘗試去編寫的，像日歷組件組件組件等。版本的，是沒有任何的鉤子函數，我就感覺懵逼了。。。 todo-list 項目問題總結這個 todo-list 項目，很簡單，前端使用 react，后端 nodejs 使用 koa2 進行開發。數據庫使用 Mysql...

shengguo 2019-08-22 15:37 評論0 收藏0
vue-cli3 搭建的前端項目基礎模板

摘要：基于搭建的前端模板，本倉庫，即可搭建完成一個新項目的基礎模板，源碼地址，歡迎或特性預編譯語言，做了一定的封裝，詳見雪碧圖移動的適配方案引入了及，可以自由地用去開發常用的工具類引用全局注入相關的文件，如通用的及等常用的的集合支持基于 vue-cli3 搭建的前端模板，clone 本倉庫，即可搭建完成一個新項目的基礎模板，源碼地址，歡迎 star 或 fork 特性 CSS 預編譯語言...

william 2019-08-26 12:24 評論0 收藏0