Vue 配置postcss.config.js CSS处理和移动端适配方案

原创

已于 2023-07-20 19:17:54 修改 · 520 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2021-05-31 15:04:22 首次发布

本文介绍了如何在Vue项目中配置postcss，利用其强大的插件进行CSS转换，包括autoprefixer、cssnano等。重点讨论了postcss-pxtorem和postcss-px-to-viewport插件，用于实现px到rem和px到vw的转换，以适应移动端适配。同时，文章提到了postcss-hash-classname和postcss-sprites等其他便利的插件。

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

Vue 配置postcss.config.js CSS处理和移动端适配方案！

#postcss：它是一个利用JS插件来对CSS进行转换的工具，这些插件非常强大，强大到无所不能。

拥有极高的处理性能（3倍以上的处理速度）
你既可以写正常的CSS，也可以结合LESS或者SASS一起编写
对Source Map支持更好
他的插件真的太多太强大太便利了

postcss 的一些不错的插件

autoprefixer是PostCSS最著名的一款插件，就不过多介绍了，相信同学们都使用过。
postcss-cssnext (内置autoprefixer) 允许你使用未来的css语法，如css4（可以理解为css中的Babel）
postcss-sprites 自动制作雪碧图，不用手动拼接啦，哈哈哈
cssnano 压缩css代码(如果你是用webpack的话，css-loader集成了cssnano，你不需要再次引入)
postcss-hash-classname 把转换后的css文件名附上哈希值
pixrem 将rem转换为px
postcss-px-to-viewport 将px转换为vh和vw（推荐作为移动端的计量单位，而不是rem）
postcss-pxtorem 将px转换为rem
postcss 的用法

px转rem

module.exports = () => ({
plugins: [
require(‘autoprefixer’)(),
// require(‘postcss-px2rem’)({ remUnit: 75 })
require(‘postcss-pxtorem’)({
rootValue: 37.5,
propList: [‘*’]
})
]
});
这里用到了 postcss-pxtorem 将px转换为rem 的插件

px转vw

module.exports = {
plugins: {
autoprefi