在使用postcss-px-to-viewport这个组件时,发现了postcss.config.js中的配置总不生效,但是在vue.config.js中的配置却能生效,最后查明原因,是因为package.json中的postcss节点配置是一个空“{}”。
所以总结了下面的一个优先级的分布情况:
vue.config.js中postcss节点,优先级最高
css: { loaderOptions: {postcss: { plugins: [ require("postcss-px-to-viewport")({ unitToConvert: "px", viewportWidth: 750, unitPrecision: 3, propList: [ "*" ], viewportUnit: "vw", fontViewportUnit: "vw", selectorBlackList: [], minPixelValue: 1, mediaQuery: false, replace: true, exclude: /(/|\)(node_modules)(/|\)/, }) ] } }, }
package.json文件中postcss节点的配置,优先级中
postcss.config.js外置配置文件,优先级最低
所以在设置postcss适配配置文件的时候,会有优先级相互覆盖的问题,请注意!