瀏覽代碼

优化rem转换方式

wulanhaote
liuminjian 3 年之前
父節點
當前提交
9ef4f08112
共有 3 個檔案被更改,包括 50 行新增82 行删除
  1. +22
    -25
      .postcssrc.js
  2. +27
    -56
      package-lock.json
  3. +1
    -1
      package.json

+ 22
- 25
.postcssrc.js 查看文件

@@ -1,28 +1,25 @@
const AutoPrefixer = require("autoprefixer");
const px2rem = require("postcss-px2rem");
module.exports = ({ file }) => {
  let remUnit;
  // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试
  //link https://github.com/youzan/vant/issues/1181

  if (file && file.dirname && file.dirname.indexOf("vant") > -1) {
    remUnit = 37.5;
  }else {
    remUnit = 75;
  }
  return {
    plugins: [
     px2rem({ remUnit: remUnit}),
     AutoPrefixer({ browsers: ["last 20 versions", "android >= 4.0"] })

    ],
"postcss-pxtorem": {
rootValue: 23.4375, // 640
propList: ['*'],
selectorBlackList: ['.tree-xxx'],
minPixelValue: 1,
exclude: /vue-search-tree/ig // src 目录下样式全部不转义
let remUnit;

if (file && file.dirname && file.dirname.indexOf("vant") > -1) {
remUnit = 37.5;
} else {
remUnit = 75;
}
return {
plugins: {

autoprefixer: {},

"postcss-px2rem-exclude": {

"remUnit": remUnit,

"exclude": /vue-search-tree/i

}
  };
};
}
}

}


+ 27
- 56
package-lock.json 查看文件

@@ -353,8 +353,7 @@
"atob": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
"dev": true
"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
},
"autoprefixer": {
"version": "7.2.6",
@@ -2258,7 +2257,6 @@
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
"integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
"dev": true,
"requires": {
"inherits": "^2.0.3",
"source-map": "^0.6.1",
@@ -3234,8 +3232,7 @@
"decode-uri-component": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
"integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
"dev": true
"integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
},
"deep-equal": {
"version": "1.1.1",
@@ -4444,7 +4441,6 @@
"version": "0.16.5",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.16.5.tgz",
"integrity": "sha1-GtZh+myGyWCM0bSe/G/Og0k5p1A=",
"dev": true,
"requires": {
"graceful-fs": "^3.0.5",
"jsonfile": "^2.0.0",
@@ -4455,7 +4451,6 @@
"version": "3.0.12",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.12.tgz",
"integrity": "sha512-J55gaCS4iTTJfTXIxSVw3EMQckcqkpdRv3IR7gu6sq0+tbC363Zx6KH/SEwXASK9JRbhyZmVjJEVJIOxYsB3Qg==",
"dev": true,
"requires": {
"natives": "^1.1.3"
}
@@ -5790,7 +5785,6 @@
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
"integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
"dev": true,
"requires": {
"graceful-fs": "^4.1.6"
}
@@ -6546,8 +6540,7 @@
"natives": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/natives/-/natives-1.1.6.tgz",
"integrity": "sha512-6+TDFewD4yxY14ptjKaS63GVdtKiES1pTPyxn9Jb0rBqPMZ7VcCiooEhPNsr+mqHtMGxa/5c/HhcC4uPEUw/nA==",
"dev": true
"integrity": "sha512-6+TDFewD4yxY14ptjKaS63GVdtKiES1pTPyxn9Jb0rBqPMZ7VcCiooEhPNsr+mqHtMGxa/5c/HhcC4uPEUw/nA=="
},
"negotiator": {
"version": "0.6.2",
@@ -9238,11 +9231,10 @@
}
}
},
"postcss-px2rem": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/postcss-px2rem/-/postcss-px2rem-0.3.0.tgz",
"integrity": "sha1-DfpOiiaPp0eCc/DEtHxhmDSJQEE=",
"dev": true,
"postcss-px2rem-exclude": {
"version": "0.0.6",
"resolved": "https://registry.nlark.com/postcss-px2rem-exclude/download/postcss-px2rem-exclude-0.0.6.tgz",
"integrity": "sha1-Rw90+5+DmUEmQ5T7uAv/yb5JRig=",
"requires": {
"postcss": "^5.0.0",
"px2rem": "~0.5.0"
@@ -9250,15 +9242,13 @@
"dependencies": {
"ansi-styles": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
"integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
"dev": true
"resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-2.2.1.tgz",
"integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
},
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"resolved": "https://registry.nlark.com/chalk/download/chalk-1.1.3.tgz?cache=0&sync_timestamp=1627646614989&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
"ansi-styles": "^2.2.1",
"escape-string-regexp": "^1.0.2",
@@ -9269,23 +9259,20 @@
"dependencies": {
"supports-color": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
"dev": true
"resolved": "https://registry.nlark.com/supports-color/download/supports-color-2.0.0.tgz?cache=0&sync_timestamp=1626703414084&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-2.0.0.tgz",
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
}
}
},
"has-flag": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
"integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
"dev": true
"resolved": "https://registry.nlark.com/has-flag/download/has-flag-1.0.0.tgz",
"integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo="
},
"postcss": {
"version": "5.2.18",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
"integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
"dev": true,
"resolved": "https://registry.nlark.com/postcss/download/postcss-5.2.18.tgz?cache=0&sync_timestamp=1626882900158&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpostcss%2Fdownload%2Fpostcss-5.2.18.tgz",
"integrity": "sha1-ut+hSX1GJE9jkPWLMZgw2RB4U8U=",
"requires": {
"chalk": "^1.1.3",
"js-base64": "^2.1.9",
@@ -9295,15 +9282,13 @@
},
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
"dev": true
"resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
},
"supports-color": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
"resolved": "https://registry.nlark.com/supports-color/download/supports-color-3.2.3.tgz?cache=0&sync_timestamp=1626703414084&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-3.2.3.tgz",
"integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
"dev": true,
"requires": {
"has-flag": "^1.0.0"
}
@@ -9911,7 +9896,6 @@
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/px2rem/-/px2rem-0.5.0.tgz",
"integrity": "sha1-JLOmz3TRSttO13byB4cdmJPkEOI=",
"dev": true,
"requires": {
"chalk": "~0.5.1",
"commander": "~2.6.0",
@@ -9923,20 +9907,17 @@
"ansi-regex": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
"integrity": "sha1-DY6UaWej2BQ/k+JOKYUl/BsiNfk=",
"dev": true
"integrity": "sha1-DY6UaWej2BQ/k+JOKYUl/BsiNfk="
},
"ansi-styles": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz",
"integrity": "sha1-6uy/Zs1waIJ2Cy9GkVgrj1XXp94=",
"dev": true
"integrity": "sha1-6uy/Zs1waIJ2Cy9GkVgrj1XXp94="
},
"chalk": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
"integrity": "sha1-Zjs6ZItotV0EaQ1JFnqoN4WPIXQ=",
"dev": true,
"requires": {
"ansi-styles": "^1.1.0",
"escape-string-regexp": "^1.0.0",
@@ -9948,14 +9929,12 @@
"commander": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz",
"integrity": "sha1-nfflL7Kgyw+4kFjugMMQQiXzfh0=",
"dev": true
"integrity": "sha1-nfflL7Kgyw+4kFjugMMQQiXzfh0="
},
"has-ansi": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
"integrity": "sha1-hPJlqujA5qiKEtcCKJS3VoiUxi4=",
"dev": true,
"requires": {
"ansi-regex": "^0.2.0"
}
@@ -9964,7 +9943,6 @@
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
"integrity": "sha1-JfSOoiynkYfzF0pNuHWTR7sSYiA=",
"dev": true,
"requires": {
"ansi-regex": "^0.2.1"
}
@@ -9972,8 +9950,7 @@
"supports-color": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz",
"integrity": "sha1-2S3iaU6z9nMjlz1649i1W0wiGQo=",
"dev": true
"integrity": "sha1-2S3iaU6z9nMjlz1649i1W0wiGQo="
}
}
},
@@ -10412,8 +10389,7 @@
"resolve-url": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
"integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
"dev": true
"integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
},
"restore-cursor": {
"version": "2.0.0",
@@ -10456,7 +10432,6 @@
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
"dev": true,
"requires": {
"glob": "^7.1.3"
}
@@ -11101,14 +11076,12 @@
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
},
"source-map-resolve": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
"integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
"dev": true,
"requires": {
"atob": "^2.1.2",
"decode-uri-component": "^0.2.0",
@@ -11137,8 +11110,7 @@
"source-map-url": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
"integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
"dev": true
"integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw=="
},
"spdx-correct": {
"version": "3.1.1",
@@ -11919,8 +11891,7 @@
"urix": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
"integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=",
"dev": true
"integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI="
},
"url": {
"version": "0.11.0",


+ 1
- 1
package.json 查看文件

@@ -18,6 +18,7 @@
"lib-flexible": "^0.3.2",
"node-sass": "^5.0.0",
"nprogress": "^0.2.0",
"postcss-px2rem-exclude": "0.0.6",
"sass": "^1.32.8",
"sass-loader": "^6.0.6",
"vant": "^2.12.8",
@@ -53,7 +54,6 @@
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-px2rem": "^0.3.0",
"postcss-pxtorem": "^6.0.0",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",


Loading…
取消
儲存