vue use postcss-px2rem-exclude perfect solution for mobile terminal adaptation problems

A mounting postcss-px2rem-exclude

npm install postcss-px2rem-exclude --save

Second, the configuration postcss-px2rem-exclude

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-import": {},
    "autoprefixer": {},
    "Postcss-px2rem-exclude": {// add code
      remUnit: 75,
      exclude: / node_modules | files in folder_name / i // ignore node_modules directory
    }
  }

　　

Then again npm run dev, open the console you can see the code px has been turned into rem

note:

    1. This method can only .vue style tag file converted into rem px, script tag and can not be defined inside style elements px converted into rem

    2. If a line of code in the file .vue style does not want to be turned into rem, as long as the written comments on the back / * no * / on it

 

Question: Why do you want to ignore the files in the directory node_modules?

A: Sometimes we need to import third-party UI library when the phone side projects, such as: VUX, MINT, etc., then you will find third-party component styles are smaller, mainly due to smaller is the third library css based on a data-dpr = "1" written death of the size, we use the flexible introduction of data-dpr not a written dead, it is a dynamic, has led to this problem.

There is no longer a third party to modify the UI style, ignored direct, straightforward and practical.

Related code: https://github.com/hwq888/skeleton   reference may be used