【vue】postcss-px2rem，postcss-px2rem-exclude，postcss-plugin-px2rem排除src下的文件

叁歲伎倆 2022-08-28 11:57 649阅读 0赞

### 文章目录 ###

*  前言
 *  代码示例
 *  示例

--------------------

# 前言 #

现在需要在一个h5web项目里面加个pc端的页面，然后写的时候发现里面引用了postcss-px2rem。

开始项目里面配置的是postcss-px2rem；  
但是发现自己新写的页面里面Px都变成了rem，然后搜到了postcss-px2rem-exclude；  
接着，发现postcss-px2rem-exclud只能排除node\_module下的文件，又搜了很久之后，发现了postcss-plugin-px2rem。  
[https://blog.csdn.net/qq\_33144001/article/details/101029955][https_blog.csdn.net_qq_33144001_article_details_101029955]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qCR5p6X5Lit55qE5ZWE5pyo6bif_size_20_color_FFFFFF_t_70_g_se_x_16]

# 代码示例 #

我这里没添加`rem.js`等配置，只改动了这一个文件。  
每次改动需要重新启动项目才会生效。  
exclude下的配置不能是字符串：‘abc’

`.postcssrc.js`

module.exports = { 
      "plugins": { 
        // to edit target browsers: use "browserslist" field in package.json
        "postcss-import": { },
        "autoprefixer": { },
        "postcss-plugin-px2rem": { 
          propList: ['*'],
          // 添加的代码
          remUnit: 37.5,
          // https://blog.csdn.net/qq_33144001/article/details/101029955
          exclude: /node_modules|element-ui/i,
          selectorBlackList: ['recruit-index']
        }
      }
    }

# 示例 #

![在这里插入图片描述][72f50e5cad644ccaa180a6856c7779b1.png]

[https_blog.csdn.net_qq_33144001_article_details_101029955]: https://blog.csdn.net/qq_33144001/article/details/101029955
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qCR5p6X5Lit55qE5ZWE5pyo6bif_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/bc9722db3a63493099e96fd7d528364c.png
[72f50e5cad644ccaa180a6856c7779b1.png]: /images/20220828/d861be1279944793ac41ab7769beca53.png