Detailed explanation of the rem problem of Vue-cli webpack mobile terminal automation construction

I believe that many friends think that their mobile project can be automatically converted to rem, which is in line with the trend of the front-end. If you use your own handwriting or editor plug-in to modify it, it is very inconvenient and easy to make mistakes. I have found many methods online to find the following problems:

1 Follow the old video tutorial and found that the various plug-in versions of node npm webpack px2rem are different, and they are useless at all

2 The online tutorial is short of two points and is incomplete, which makes me unable to solve it for a long time. Thinking about it, I just manually set up the cssrem of vscode, but I was still not convinced, and I still put it together. Finally, I have studied the following methods and hope it will be helpful for everyone's mobile automation construction of rem.

1 I won’t say much about installing vue-cli, everyone should know

2 Install and configure px2rem-loader (I haven't tried many problems with postcss here and decided to use this)

Step 1: npm install px2rem-loader

Part 2: Add objects below. Here I am using sass. Just use the others to modify them according to the following rules. I believe you can understand them.

={
module: {
  rules: [
   {
    test: /\.(css|less|scss)(\?.*)?$/,
    loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
   }
  ]
 }
}

Step 3: Add something to plugins below. Everyone must pay attention to the remUnit property, which is 40px in Apple 5. I set it to 40 here, and some people set it to 80. I set it to 40 here, so I use it to 40 here, so I will talk about it below.

 plugins: [
  new ({
   // After webpack 2.0, this configuration cannot be written directly in custom configuration items, it must be written here   vue: {
    postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })]
   }
  }
 ]

Part 4: This is something that many people don’t know, and many people are just this step away. Find const cssLoader and add?importLoaders=1

 const cssLoader = {
  loader: 'css-loader?importLoaders=1',
  options: {
   minimize: .NODE_ENV === 'production',
   sourceMap: 
  }
 }

The installation is complete so far

Enter font-size:40px

Output font-size:1rem (under iPhone)

3 We all know that the pixel ratio of the device is different, so we use hotcss to adjust the pixel ratio of the device.Link

I put it in src/assets/js/, you can follow your habits

Introduce the method, you can define any name yourself, here I will change it to

 = {
 entry: {
  app: './src/',
  rem: './src/assets/js/'
 }
}

That's it

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.