mpvue中引用Vant-weapp时,没有把原来的px转换成rpx问题解决办法(踩坑记录)
由于node_modules不会编译到dist目录中,所以使用npm安装的vant-weapp还需要将仓库中的vant文件夹复制到你的项目目录static下,至此问题就出在放在static文件夹中的文件打包的时候不会被webpack打包进去,使用的时候还是会按照vant-weapp固有的px单位,如果每次引用一个组件都要修改的话太麻烦,所以也可以修改下webpack配置文件实现编译转换:修改文件.
·
由于node_modules不会编译到dist目录中,所以使用npm安装的vant-weapp还需要将仓库中的vant文件夹复制到你的项目目录static下,至此问题就出在放在static文件夹中的文件打包的时候不会被webpack打包进去,使用的时候还是会按照vant-weapp固有的px单位,如果每次引用一个组件都要修改的话太麻烦,所以也可以修改下webpack配置文件实现编译转换:
修改文件如下图:
修改代码为(在文件中搜索关键词CopyWebpackPlugin):
修改前:
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
修改后(增加一层判断):
var Px2rpx = require('px2rpx');
var px2rpxIns = new Px2rpx({ rpxUnit: 0.5 });
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
transform(content, path) {
if (path.endsWith('.wxss')) {
return px2rpxIns.generaterpx(content.toString(), 1)
} else {
return content
}
},
ignore: ['.*']
}
]),
这样子配置就可以实现static里面的 .wxss 文件也会被编译进去,就实现了转换。
更多推荐
已为社区贡献12条内容
所有评论(0)