Home > Web Front-end > JS Tutorial > body text

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

php中世界最好的语言
Release: 2018-05-26 15:41:00
Original
1546 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: 'css-loader?importLoaders=1',
  options: {
   minimize: process.env.NODE_ENV === 'production',
   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: './src/main.js',
  rem: './src/assets/js/viewport.js'
 }
}
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!

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template