Detailed explanation of webpack's mobile terminal automated construction rem method-JS Tutorial-php.cn

Detailed explanation of webpack's mobile terminal automated construction rem method

php中世界最好的语言

Release： 2018-04-11 13:34:02

Original

2006 people have browsed it

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

1 Following the old video tutorial, I 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. It took me a long time to figure it out. I thought about manually setting the cssrem of vscode, but I was still not convinced. I pieced it together and finally figured it out. The following method is provided, I hope it will be helpful for everyone to automatically build 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 (postcss is not used here. After trying many problems, I decided to use this)

The first step: npm install px2rem-loader

Part 2: Add

object under webpack.base.conf.js. Here I use sass. If you use others, 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'
   }
  ]
 }
}

Copy after login

Step 3: Add something to the plugins under webpack.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. Here I have 40 It is to be used with hotcss. I will talk about it below

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

Copy after login

Part 4: This is something 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
  }
 }

Copy after login

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 devices 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

To introduce a 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'
 }
}

Copy after login

That's it!

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!