Shulou(Shulou.com)06/02 Report--

This article introduces the "Mini Program Vant components how to convert the default style unit px into rpx" related knowledge, in the actual case operation process, many people will encounter such a dilemma, then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

Implementation steps

1. Initialize and install

Npm init / / enter all the way npm install-- production npm i @ vant/weapp-S-- production

2. Check npm in WeChat Mini Programs's development tools.

3. Build npm in WeChat Mini Programs's development tools.

4. After successful construction, the miniprogram_npm folder will appear.

5. Install the NPM package

Npm install gulp gulp-postcss postcss-px2units-save-dev

6. Create a new gulpfile.js file in the root directory

Var gulp = require ('gulp'); var postcss = require (' gulp-postcss'); var pxtounits = require ('postcss-px2units'); gulp.task (' css', function () {return gulp.src (['miniprogram_npm/@vant/weapp/**/*.wxss']) .pipe (postcss ([pxtounits ({multiple: 2, targetUnits:' rpx'})])) .pipe (gulp.dest ('miniprogram_npm/@vant/weapp/')) });

7. Add an execute command to the scripts under package.json

"scripts": {"build": "gulp css", "test": "echo\" Error: no test specified\ "& & exit 1"}

8. Execute on the command line

Npm run build

9. View the converted wxss file

This is the end of how the Mini Program Vant component converts the default style unit px to rpx. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.