How to use Vue-cli webpack mobile terminal to automatically build rem-JS Tutorial-php.cn

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

php中世界最好的语言

Release： 2018-05-26 15:41:00

Original

1536 people have browsed it

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

Copy after login

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'
   }
  ]
 }
}

Copy after login

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: [] })]
   }
  }
 ]

Copy after login

: 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: &#39;css-loader?importLoaders=1&#39;,
  options: {
   minimize: process.env.NODE_ENV === &#39;production&#39;,
   sourceMap: options.sourceMap
  }
 }

Copy after login

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: &#39;./src/main.js&#39;,
  rem: &#39;./src/assets/js/viewport.js&#39;
 }
}

Copy after login

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!