postcss-px-to-viewport include的用法

分手后的思念是犯贱 2021-09-07 12:00 438阅读 0赞

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][https_github.com_evrone_postcss-px-to-viewport_issues_53]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70][]

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

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

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

下载后如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 2][]

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、我的项目目录如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 3][]

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

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

![20210425101003473.png][]

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

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

![2021042510175510.png][]

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

[https_github.com_evrone_postcss-px-to-viewport_issues_53]: https://github.com/evrone/postcss-px-to-viewport/issues/53
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70]: /images/20210813/cc9cfd6d26d8447f963d4ecb9659bdc3.png
[https_github.com_evrone_postcss-px-to-viewport]: https://github.com/evrone/postcss-px-to-viewport
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 1]: /images/20210813/ed09267767b64e91807604b5d5011427.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 2]: /images/20210813/fd30307c291c4ff7a28e3b72042f885a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 3]: /images/20210813/c642952a6e7b4f569ee28a7743185e4a.png
[20210425101003473.png]: /images/20210813/e00f5a4d524d4b9cbaca9a827f16c706.png
[2021042510175510.png]: /images/20210813/d56f22e8fc4c4028b715d2fae35b5b51.png