关于postcss-px2rem配置

postcss-px2rem配置

1、先安装postcss-plugin-px2rem

npm install   postcss-px2rem postcss  postcss-loader --save

2、在webpack.base.conf.js添加这句代码

const webpack = require('webpack')

3、根据下面的图加入这两段代码段

{test: /\.scss$/,loaders: ['style-loader', 'css-loader', 'postcss-loader']},

plugins: [new webpack.LoaderOptionsPlugin({// webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处vue: {postcss: [require('postcss-px2rem')({ remUnit: 37.5, propWhiteList: [] })]},})],

4、在html文件里添加这一段

 <script>!function(){var a="@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",b=document.createElement("style");if(document.getElementsByTagName("head")[0].appendChild(b),b.styleSheet)b.styleSheet.disabled||(b.styleSheet.cssText=a);else try{b.innerHTML=a}catch(c){b.innerText=a}}();!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("灏嗘牴鎹凡鏈夌殑meta鏍囩鏉ヨ缃缉鏀炬瘮渚�");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));</script>

改完之后重新启动项目就可以用啦
注意，改了配置之后vue里style的代码段引用的图片路径可能要有些改变
以前是这样引用图片的

配置postcss-px2rem之后需要把路径信息修改成url(src/assets/img/bg.png)这样就可以用了，其他文件路径正常使用，css代码的路径需要这样改，不然会报错。

希望可以帮到你们~

关于postcss-px2rem配置相关推荐

vue项目中字体自适应屏幕(使用px2rem插件)
1.为什么使用rem做适配? 答:当你使用px做单位的时候,在不通分辨率的手机型号,他显示的大小就是设定的多少px,当手机尺寸大时,那么元素就会显得很小,当手机分辨率过小时,元素就会显得很大,因为我们 ...
使用postcss-plugin-px2rem和postcss-pxtorem(postcss-px2rem)-px自动转换rem的配置方法-vue-cli3.0
在vue-cli3.0中使用postcss-plugin-px2rem 插件插件的作用是自动将vue项目中的px转换为rem postcss-plugin-px2rem优势: 因为 postcs ...
vue-cli3项目使用px2rem插件做自适应
第一步,安装插件 npm install postcss-px2rem px2rem-loader --save 第二步,在根目录src中新建util目录下新建px2rem.js等比适配文件 // r ...
vue px2rem插件的使用
安装 postcss-px2rem及px2rem-loader npm install postcss-px2rem px2rem-loader --save 在根目录src中新建utils目录下新建 ...
vue2项目中实现字体自适应（使用px2rem插件将px转rem）
1.安装px2rem插件 npm add postcss-px2rem 2.配置 (1)在src下的utils目录中新建px2rem.js文件(没有utils就新建一个) px2rem.js // 基 ...
webpack编译时No PostCSS Config的解决方法
1. {loader:"postcss-loader",options: { // 如果没有options这个选项将会报错 No PostCSS Config foundplugi ...
关于 Error: No PostCSS Config found in 的错误
问题描述: 项目在本地运行不报错,上传到 GitHub 之后,再 clone 到本地, npm install 安装完成之后再执行 npm run dev 这时报错 Error: No PostCSS ...
npm 报错 Module build failed: Error: No PostCSS Config found in:
npm 报错 Module build failed: Error: No PostCSS Config found in: 你在网上找的解决方案应该有提到webpack版本的问题.不要以为升级web ...
webpack配置完全指南
概念来看一下官网对webpack的定义: 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会 ...
Webpack配置全解析（基础篇）
Webpack凭借强大的功能,成为最流行和最活跃的打包工具,也是面试时高级程序员必须掌握的"软技能":笔者结合在项目中的使用经验,介绍webpack的使用:本文是入门篇,主要介 ...

关于postcss-px2rem配置

postcss-px2rem配置

关于postcss-px2rem配置相关推荐

最新文章

热门文章