在vue-cli引入postcss插件的小教程-优快云博客

本文介绍如何在 Vue CLI 项目中配置并使用 PostCSS，包括安装必要的依赖和配置文件设置。通过示例展示了如何应用 postcss-px-to-viewport 插件进行移动端页面适配。

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

vue-cli引入postcss了

不知道大家有没有留意到，新版的vue-cli已经包含了postcss的包，在目录里也有了postcss的配置文件。

既然官方脚手架都钦定了，那么作为一个喜欢拥抱潮流（ zuosi ）的前端，怎能不试试新东西呢。正好，最近要重构项目，正好，看了大漠老师的再聊移动端页面的适配果断在项目中引入 postcss。

安装vue-cli+用vue-cli搭建项目

这一步跳过

配置使用postcss

因为新版vue-cli已经引入了postcss，安装的过程就免了。 ps.引入了两个包：postcss-import，postcss-loader 那我们只需要直接配置就好了打开./build/vue-loader.conf.js,可以看到：

loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction,
  }),
复制代码

在‘extract: isProduction,’后添加usePostCSS:true，如图

现在，我们就可以光明正大地用postcss了。

postcss插件

以postcss-px-to-viewport为例

npm i postcss-px-to-viewport --save
复制代码

在配置文件.postcssrc.js中添加配置

"postcss-px-to-viewport": { 
      viewportWidth: 750, 
      viewportHeight: 1334, 
      unitPrecision: 5, 
      viewportUnit: 'vw', 
      selectorBlackList: [], 
      minPixelValue: 1, 
      mediaQuery: false 
    },
复制代码

看一下效果：

浏览器打开效果

最后

配置过程很简单吧，不过对于更新飞快的 vue-cli，可能这个配置教程很快就过时了，所以说还是好好学习 webpack 才是硬道理。例如现在看看 utils.js 里 postloader 是怎么被引入的。