Detailed explanation of the steps to automatically build rem for webpack mobile terminals

This time I will bring you a detailed explanation of the steps to automatically build rem for the webpack mobile terminal. What are the precautions for the automatic construction of rem for the webpack mobile terminal. The following is a practical case, let's take a look.

I believe that many friends think that their mobile projects can be automatically converted to rem. This is in line with the front-end trend. It is very inconvenient to make changes by handwriting or editor plug-ins. It is easy to make mistakes. I searched a lot of methods on the Internet and found the following problems:

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

2 The tutorials on the Internet were lacking and incomplete, and it took me a long time to figure it out. I thought about manually setting the cssrem settings of vscode, but I was still not convinced, so I pieced together everything and finally got it. , and finally developed the following method, which I hope will be helpful to everyone’s automatic rem construction on the mobile terminal

1 I won’t go into detail about installing vue-cli, everyone should know how

2 Install and Configure px2rem-loader (I didn’t use postcss here and tried many problems but decided to use this)

Step one: npm install px2rem-loader

Part two: webpack.base.conf. Add objects under js. Here I use sass. Use other ones and change them according to the following rules. I believe everyone can understand

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

Step 3: Add a plugin under webpack.dev.conf.js Things, everyone must pay attention to the attribute of remUnit, which is 40px in the case of Apple 5. I set it as 40 here, and some people set it as 80. The 40 here is for use with hotcss. I will talk about it below

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

Part 4: This is something many people don’t know. Many people just miss this step. Find the const cssLoader under utils.js and add ?importLoaders=1

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

The installation is complete until here

Inputfont-size:40px

Output font-size:1rem (under iphone)

3 We all know that the pixel ratio of devices is different. So we use hotcss to adjust the pixel ratio link of the device

I put it in src/assets/js/, you can introduce the method according to your habits

You can define any name yourself, here I changed hotcss.js to viewport.js

module.exports = {
 entry: {
  app: './src/main.js',
  rem: './src/assets/js/viewport.js'
 }
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of using React Router v4

Instructions for getting started with vue forms

The above is the detailed content of Detailed explanation of the steps to automatically build rem for webpack mobile terminals. For more information, please follow other related articles on the PHP Chinese website!