Vue mobile terminal adaptation (rem lib-flexible postcss-plugin-px2rem)

Vue mobile terminal adaptation (rem lib-flexible postcss-plugin-px2rem)

Source www.cnblogs.com/chenhuichao...

1. Install the plugin lib-flexible, postcss-plugin-px2rem

npm i lib-flexible --save-dev
npm install postcss-plugin-px2rem --save-dev

main.js
import 'lib-flexible' 
 

2. Configure postcss

  • If it is the .postcssrc.js file configured in the root directory of vue-cli 2.0
  • If it is vue-cli 3.0 configured in the vue.config.js file in the root directory
module.exports = {
   //px rem postcss-plugin-px2rem 
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-plugin-px2rem')({
                         rootValue: 108,//  100   1rem 50px, px px 
                       //unitPrecision: 5,//REM 
                       //propWhiteList: [], //
                        propBlackList: [],//
                        exclude:/(node_module)/, //false reg/(node_module)/ UI px rem 
                        selectorBlackList: ['.van'],//px 
                       //ignoreIdentifier: false, //boolean/string ignoreidentifier replace true 
                       //replace: true,// REM 
                        mediaQuery: false, //px 
                       //minPixelValue: 3//(3px rem)    0
                    }),
                ]
            }
        }
    },
 

3. Solve the problem that the third-party ui library has a messy style in the adaptation

  • Perform style filtering of third-party libraries in the postcss configuration file to avoid two adaptations
     exclude:/(node_module)/,  
     selectorBlackList: ['.van'],