postcss-px-to-viewport如何实现单页面使用？

张志鹏PHP全栈2025-08-26 14:01

从介绍上可以看到，postcss-px-to-view是有include，但是正常安装此插件却无法使用include这一配置项，这是因为源码未更新导致的，故我们需要安装github上的代码。如下截图：

然后你在正真配置的时候就知道不起作用了。如果你去看代码，那就太浪费时间了。可能百度又找不到合适的解决方法。

以下是我找了很长时间才找到的解决方法，我们来看：

1.使用命令安装

yarn

ini 复制代码

yarn add https://github.com/evrone/[postcss-px-to-viewport](https://so.csdn.net/so/search?q=postcss-px-to-viewport&spm=1001.2101.3001.7020 "postcss-px-to-viewport")  --save-dev

npm

less 复制代码

npm i https://github.com/evrone/postcss-px-to-viewport --save-dev

2.安装之后我们一定要检查配置文件

package.json

json 复制代码

"devDependencies": {
		"less": "^4.2.0",
		"nuxt": "^3.6.5",
		"postcss-px-to-viewport": "https://github.com/evrone/postcss-px-to-viewport",  // 这一行，如果不一样就给他改成这个
		"sass": "^1.89.2",
		"typescript": "^5.6.2",
		"vue-tsc": "1"
	},

3.配置项目

bash 复制代码

postcss: {
	     plugins: {
	       'postcss-px-to-viewport': {
	         viewportWidth: 750,
			 include: [
				 /\/pages\/concat\//,
				 /\/components\/concat\//
			 ],
	       }
	     }
},

上面代码就是按照文档中的来就行了，配置好。可能有小伙伴问你这怎么是pages文件夹而不是src?

haha,这是因为我用的是Nuxt3.想必聪明的，已经在第二步package.json中看出来了。最后就是修改完保存重启项目了。这里就不啰嗦了。

感谢大家观看，有缘再见！