How to configure vue px to rem

This article mainly explains "how to configure vue px to rem". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to configure vue px to rem.

Method one by one, configuration and installation steps:

1. Create a config folder under the src folder of the Vue project:

2. Create a rem.js in the config folder:

3. Copy the following code into rem.js:

/ / Base size const baseSize = 32max / set rem function function setRem () {/ / the scale of the current page width relative to 750W can be modified according to your own needs. Const scale = document.documentElement.clientWidth / 750 / / set the font size of the root node of the page document.documentElement.style.fontSize = (baseSize * Math.min (scale, 2)) + 'px'} / / initialize setRem () / / reset rem_window.onresize = function () {setRem ()} when changing the window size

4. Introduce: in the main.js under the src folder:

Import'. / config/rem'

5. Introduce: in the root directory terminal of Vue project:

Npm install postcss-pxtorem-D

6. Add the following to postcss.config.js under the Vue project folder:

Module.exports = {plugins: {autoprefixer: {}, "postcss-pxtorem": {"rootValue": 16, "propList": ["*"]} method 2

Step 1 install lib-flexible

Npm I lib-flexible-- save

Step 2 install px2rem-loader

Npm install px2rem-loader-save-dev

The third step is to introduce lib-flexible

Import 'lib-flexible/flexible'

The fourth step is the most important step to configure the utils file

Const px2remLoader = {loader: 'px2rem-loader', options: {remUnit: 37.5}}

/ / add px2remLoader1const loaders = [cssLoader,px2remLoader] to the generateLoaders method

Or step 4: Create new "vue.config.js" file if without "vue.config.js" (directory: hello-world/vue.config.js)

Module.exports = {chainWebpack: (config) = > {config.module .rule ('css') .test (/\ .css $/) .oneOf (' vue') .resourceQuery (/\? vue/) .use ('px2rem') .loader (' px2rem-loader') .options ({remUnit: 75 / / 75 represents a 750design draft 37.5 represents the design draft of 375})}}

1. Writing according to px will be converted into rem form, but there are some places we do not want to convert, we can use the following two ways.

Adding / no/, after px will not convert px, it will output as is. -this is usually required for border

Adding / px/, after px generates three sets of code depending on the dpr. -this is required for general fonts.

2 in the process of use, it is found that some import outreach styles will not be converted, pay attention to avoid these pits.

/ * px2rem can be converted normally * / / * px2rem cannot be converted normally * / @ import'.. / assets/style.css'; / * px2rem cannot be converted properly * / @ import url ('.. / assets/style.css'); method 3

Step 1 install amfe-flexible

Npm I amfe-flexible-S

Step 2 install postcss-pxtorem

Npm install postcss-pxtorem-save-dev

The third step is to introduce amfe-flexible

Import 'amfe-flexible'

Step 4 create a postcss.config.js file in the root directory

Module.exports = {plugins: {'postcss-pxtorem': {rootValue: 37.5, propList: [' *]} at this point, I believe you have a deeper understanding of "how to configure vue px to rem". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!