看了一些博客几乎都是互相抄袭，用了很多不知道是什么作用的插件。其实px转vw只用了一个核心插件postcss-px-to-viewport，安装该插件，然后在根目录新建postcss.config.js做一下配置，在项目中就可以随意写px了。webpack会将px自动转换为vw。

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
    plugins: {
        "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-loader等，但是会自动安装。