Detailed explanation of Vue-cli webpack mobile terminal automatic build rem problem

This article mainly introduces the detailed explanation of Vue-cli webpack mobile terminal automatic construction rem problem. Now I will share it with you and give you a reference.

I believe that many friends think that their mobile projects can be automatically converted to rem, which is in line with the front-end trend. It is very inconvenient and error-prone to make changes by handwriting or editor plug-ins. I am online After searching a lot of methods, I 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 worked out the following method, which I hope will be helpful to everyone in automating the construction of rem for mobile terminals

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

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

Step one: npm install px2rem-loader

Part 2: Add objects under webpack.base.conf.js. Here I use sass. If you use other ones, just follow the following rules. I believe everyone can understand it

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

The third step: Add something to the plugins under webpack.dev.conf.js. You must pay attention to the remUnit attribute, which is 40px in the case of Apple 5. I set it to 40 here, and there are also People set it as 80, my 40 here is to match the use of hotcss. I will talk about it below

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

The fourth part: Many people don’t know this Yes, many people just miss this step. Find 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 now

Input font-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/, and you can introduce the method according to your habits

You can define any name. Here I changed hotcss.js to viewport.js

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. help.

Related articles:

Ajax method of reading properties resource file data

Ajax method to achieve regular update of a page block Content method

Ajax method to obtain response content length

##

The above is the detailed content of Detailed explanation of Vue-cli webpack mobile terminal automatic build rem problem. For more information, please follow other related articles on the PHP Chinese website!