基于vue cli5使用vant 组件,postcss-px-to-viewport 无法解析vant内部样式问题

参照以上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: (loaderC
Vue 2项目中使用`postcss-px-to-viewport`来将Vant UI库的px单位转换成rem单位,可以实现项目的适配性更好,尤其是在不同分辨率的屏幕上。以下是实现的步骤: 1. 安装`postcss-px-to-viewport`和`autoprefixer`。这两个插件可以帮助你将px单位转换成viewport单位,同时自动添加浏览器前缀。使用npm或者yarn来安装它们。 ```bash npm install postcss-px-to-viewport autoprefixer --save-dev # 或者 yarn add postcss-px-to-viewport autoprefixer --dev ``` 2. 在项目的根目录创建或修改`postcss.config.js`文件,并配置`postcss-px-to-viewport`插件。你需要指定转换的视口宽度、单位和其它配置选项。以下是一个基本的配置示例: ```javascript module.exports = { plugins: { // 先运行 autoprefixer 进行样式兼容性处理 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 7'] }, // 再运行 px-to-viewport 自动将 px 转换成对应的视口单位 'postcss-px-to-viewport': { viewportWidth: 375, // 视口宽度,通常是设计稿的宽度 viewportHeight: 667, // 视口高度 unitPrecision: 3, // 单位转换后保留的精度 viewportUnit: 'rem', // 希望使用的视口单位 selectorBlackList: [], // 需要排除的CSS选择器,不会转为视口单位 minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换 mediaQuery: false, // 媒体查询里的单位是否需要转换单位 exclude: /node_modules/i // 忽略 node_modules 下的文件 } } }; ``` 3. 确保你的构建工具支持PostCSS。如果你使用的是Vue CLI创建的项目,Vue CLI已经包含了对PostCSS的支持。如果你使用的是Webpack,那么你需要在Webpack配置中加入对应的loader来处理CSS文件。 4. 重新启动你的开发服务器,这样`postcss-px-to-viewport`就会自动处理你的样式文件中的px单位。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值