postcss-px-to-viewport include的用法

postcss-px-to-viewport这个插件还是很有用处的，可以使 px单位转换成vw视口单位，include可以限制只在某个文件夹或者某个文件使用px转vw的功能，比较适合一个项目有两种不同单位的情况。

因为npm 上面的 postcss-px-to-viewport包并不支持include的用法，需要使用github上面的包，而且在使用include时还有一些误导，所以简要说明一下。

原文如下：

https://github.com/evrone/postcss-px-to-viewport/issues/53

1、下载github上面的postcss-px-to-viewport

npm i https://github.com/evrone/postcss-px-to-viewport --save-dev

如果npm命令无法下载，尝试先安装cnpm，用cnpm命令下载。

下载后如下

2、在postcss.config.js进行设置，哪些文件夹或文件需要使用postcss-px-to-viewport

module.exports = ({ file }) => {
  return {
    plugins: {
      autoprefixer: {},
      'postcss-px-to-viewport': {
        unitToConvert: 'px',
        viewportWidth: 750, // UI设计稿的宽度
        viewportHeight: 1080,
        unitPrecision: 3, // 精度
        propList: [
          // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          '*'
        ],
        viewportUnit: 'vw', // 指定需要转换成的视窗单位
        fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位
        selectorBlackList: [],
        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
        mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
        replace: true, // 是否转换后直接更换属性值
        include:[/views/],
        landscape: false // 是否处理横屏情况
      }
    }
  }
}

3、我的项目目录如下

4、假如我希望views下面的dragFlow.vue和frame.vue文件起作用该怎么设置？

按照官方的说明，要这样用

我试了使用 include:/\/src\/views\//,并没有起作用，所有有点坑，以为要相对路径设置。

最后尝试①include:/views/,    ②include:[/views/], ③include:[/dragFlow/,/frame/], 这三种设置都是可以起作用的。也就是说设置include不需要相对路径，想要那个文件夹起作用就直接写文件夹名称include:/views/，或者列出该文件夹下所有文件。如果有多个文件夹或文件同时起作用，要用[]数组的形式括起来。

修改完成后保存，然后 npm run dev，重启下服务就可以看到生效后的效果