postcss-pxtorem 插件的配置

原创已于 2022-10-10 17:07:23 修改 · 6.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-03-21 16:34:02 首次发布

笔记专栏收录该内容

64 篇文章

订阅专栏

本文探讨了在移动端使用postcss-pxtorem时遇到的SyntaxError，介绍了如何从PostCSS8版本降至5.1.1解决冲突，并详细配置了.postcssrc.js以处理不同场景下的px转rem需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

移动端正常安装postcss-pxtorem

安装完配置.postcssrc.js文件简单的配置如下：

module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 8']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}

配置完修改配置如下

/**
* PostCSS 配置文件
*/

module.exports = {
// 配置要使用的 PostCSS 插件
plugins: {
// 配置使用 autoprefixer 插件
// 作用：生成浏览器 CSS 样式规则前缀
// VueCLI 内部已经配置了 autoprefixer 插件
// 所以又配置了一次，所以产生冲突了
// 'autoprefixer': { // autoprefixer 插件的配置
// // 配置要兼容到的环境信息
// browsers: ['Android >= 4.0', 'iOS >= 8']
// },

// 配置使用 postcss-pxtorem 插件
// 作用：把 px 转为 rem
'postcss-pxtorem': {
rootValue ({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75
},
propList: ['*']
}
}
}

修改完就报错了检查package.json

"postcss-pxtorem": "^6.1.1",

因为版本太高了执行以下命令降到5.1.1就可以啦

npm i postcss-pxtorem@5.1.1