postcss-pxtorem指定文件不做转化
时间: 2024-09-24 14:25:27 浏览: 75
vue3.0中使用postcss-pxtorem的具体方法
`postcss-pxtorem` 是一个 PostCSS 插件,用于将设计稿中的像素单位(如 `px`)转换成相对单位(如 `rem`),以便于响应式设计。如果你不想对某个特定的文件内的像素值进行转换,你可以通过配置插件来实现:
1. 配置文件 (`postcss.config.js`) 或者直接在 CSS 文件的头部使用 `@import` 和 `@charset` 注释:
```javascript
// postcss.config.js
module.exports = {
plugins: {
pxtorem: {
rootValue: 16, // 设定根元素的 font-size,默认是10px
exclude: /path/to/excluded/file\.css/, // 匹配不处理的文件路径
propList: ['*'], // 只对某些属性进行转换,可以设置为['width', 'height']等
},
},
};
```
或者在 CSS 文件顶部添加注释:
```css
/* @custom-media (prefers-reduced-motion: reduce) { ... */
/* 这些规则不会经过 px-to-rem 转换 */
body {
/* 不处理 body 元素的 px 值 */
width: 800px;
}
```
阅读全文