vue-cli3.x mobile terminal adaptation (use postcss-px2rem to ignore the specified file without affecting the UI component style solution) - personal test works! ! !

I have been searching online for a long time, but the tutorials provided are not very practical. Because 3.x integrates configuration files into package.json, our configuration information needs to be configured in package.json.
I've been looking for this for a long time. (I’m so bad o(╥﹏╥)o)

cd current folder

npm install lib-flexible --save
npm install postcss-pxtorem --save

Add the following code at the end of package.json

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 75,
        "propList" : ["*"],
     }
    }
  }

Introduced in main.jsimport 'lib-flexible'

----------Dividing line----------

Additional explanation on August 26, 2020:

Later in the project, we encountered the problem of affecting the styles of UI components. Then I searched online for a long time, but I didn't feel that it was particularly correct.
Let me share my solution process. Personal test is effective! ! !

Step one: (from the Internet)
postcss-px2rem cannot ignore the specified file.
Postcss-px2rem-exclude needs to be installed (postcss-px2rem needs to be uninstalled before installation)

npm  uninstall postcss-px2rem --save-dev
npm  install postcss-px2rem-exclude --save

Step 2: (This step is more critical)
Insert image description here
Originally, the ignore path was set in package.json, but removing the quotation marks will result in an error. There is no other way but to create a new postcss.config.js in the root directory.
Insert image description here
That’s it~~~

Guess you like

Origin blog.csdn.net/qq_35696889/article/details/106904574