vue中px转为rem的配置

最新推荐文章于 2024-10-05 01:22:45 发布

别关机我还能学

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量130

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45412615/article/details/107986505

版权

本文介绍了在Vue.js项目中将px转换为rem的配置步骤。首先通过npm安装amfe-flexible和postcss-pxtorem库，接着创建vue.config.js文件（如果不存在），并在其中进行相应配置。最后，在main.js文件中导入设置，完成转换。重新运行项目后，所有px单位将自动转换为rem。

摘要由CSDN通过智能技术生成

vue中px转为rem的配置

首先使用npm下载amfe-flexible和postcss-pxtorem这两个东西
npm i amfe-flexible --s
npm i postcss-pxtorem --s

下载完后去vue里面配置
创建vue.config.js文件(vue-cli3是木有的，需要自己新建)~~~~
创建完后在里面配置

module.exports = {
	css: {
		loaderOptions: {
			postcss: {
				plugins: [
					require('postcss-pxtorem')({ // 把px单位换算成rem单位
						rootValue: 35, // 换算的基数
						selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
						propList: ['*']
					})
				]
			}
		}
	}	
}