How to use Vue-cli webpack mobile terminal to automatically build rem

这次给大家带来如何使用Vue-cli webpack移动端自动化构建rem，使用Vue-cli webpack移动端自动化构建rem的注意事项有哪些，下面就是实战案例，一起来看一下。

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 and error-prone to make changes by handwriting or editor plug-ins. I searched online. Many methods have 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 figured it out. I still researched the following method and hope it will be helpful for everyone to automate the construction of rem on mobile terminals

1 Install vue-cli I won’t go into details about this, everyone should know it

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

The first step: npm install px2rem-loader

The second part : Add objects under webpack.base.conf.js. Here I use sass. If you use other ones, just follow the following rules. I believe you all 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: webpack. Add something to the plugins under dev.conf.js. Everyone must pay attention to the remUnit attribute, 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 the fourth part of

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

: This is something that many people don’t know. 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 so far

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/, you can follow your habits

Introduce the method, 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'
 }
}

This way you are done

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

Recommended reading:

How to use JS to find the maximum element of a Number type array

How to correctly use the vuex project structure directory and Configuration

The above is the detailed content of How to use Vue-cli webpack mobile terminal to automatically build rem. For more information, please follow other related articles on the PHP Chinese website!