基于vue cli5使用vant 组件,postcss-px-to-viewport 无法解析vant内部样式问题
参照以上vant官网提供的方式,发现只能编译项目内部开发的页面,根本无法将vant样式px编译为vw单位,以下是使用官方例子后编译后的样式单位 项目基于vue-cli5搭建的,后续解决方式采用webpack中postcss-loader参数postcssOptions解决。具体无法解析的原因不详,估计与vue-cli配置有关。以下是解决后的样式单位 附上解决方案,首先安装postcss-px-to
·
参照以上vant官网提供的方式,发现只能编译项目内部开发的页面,根本无法将vant样式px编译为vw单位,以下是使用官方例子后编译后的样式单位
项目基于vue-cli5搭建的,后续解决方式采用webpack中postcss-loader参数postcssOptions解决。具体无法解析的原因不详,估计与vue-cli配置有关。以下是解决后的样式单位
附上解决方案,首先安装postcss-px-to-viewport
npm install postcss-px-to-viewport --save-dev
以下是vue.config.js的代码,并且支持了项目ui设计稿为750px标准情况
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
css: {
loaderOptions: {
postcss: {
postcssOptions: (loaderContext) => {
return {
plugins: [
["autoprefixer"],
// vant px转vw。参坑:单独写在postcss.config.js中无法解析vant内部样式
{
"postcss-px-to-viewport": {
unitToConvert: "px",
// 区分vant设计以375为基准。实际项目ui为750的情况
viewportWidth: loaderContext.resourcePath.includes("vant") ? 375 : 750,
unitPrecision: 5,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [],
landscape: false,
landscapeUnit: "vw",
landscapeWidth: 568,
},
},
],
};
},
},
},
},
});
更多推荐
已为社区贡献1条内容
所有评论(0)