vue-cli3.0中使用 postcss-pxtorem 适配移动端步骤以及postcss.config.js配置文件不起作用解决

1、首先用vue-cli新构建一个项目

vue create vuetest

2、在项目的根目录下新建一个postcss.config.js配置文件，并且在配置文件里写入

module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "postcss-aspect-ratio-mini": {}, 
        "postcss-write-svg": {
            utf8: false
        },
        "postcss-cssnext": {},
        "postcss-px-to-viewport": {
            viewportWidth: 750,     // (Number) The width of the viewport.
            viewportHeight: 1334,    // (Number) The height of the viewport.
            unitPrecision: 3,       // (Number) The decimal numbers to allow the REM units to grow to.
            viewportUnit: 'vw',     // (String) Expected units.
            selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
            minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
            mediaQuery: false       // (Boolean) Allow px to be converted in media queries.
        }, 
        "postcss-viewport-units":{},
        "cssnano": {
            preset: "advanced",
            autoprefixer: false,
            "postcss-zindex": false
        }
    }
  }
  

3、安装依赖包

yarn add postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S   

yarn add postcss-import --S

yarn add postcss-url --S

yarn add cssnano-preset-advanced --save-dev

4、到这里配置文件以及依赖包就安装完了，但是小伙伴们发现运行后项目px单位并没有转化为vw,而且上面的配置根本就不起作用？这到底是什么原因引起的呢？起始我一开始也很纳闷，一直在查资料也没有相关的文章有说明；后来我在package.json这个文件里找到了解决的方法，

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

在package.json里找到下面的这一段配置并且删掉

 "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },

5、重新运行yarn serve就可以了

 

 

至于这是是什么原因，我也不清楚，如果知道的小伙伴可以留言告诉一下？