uniapp 中 postcss-px-to-viewport 不生效如何解决
时间: 2023-02-18 10:23:54 浏览: 182
可以尝试在 uni-app 项目中的 postcss.config.js 中添加以下配置:
```
module.exports = {
plugins: {
"postcss-px-to-viewport": {
viewportWidth: 750,
unitPrecision: 3,
viewportUnit: 'vw',
selectorBlackList: ['.ignore', '.hairlines'],
minPixelValue: 1,
mediaQuery: false
}
}
}
```
相关问题
uniapp 使用 postcss-px-to-viewport
UniApp 是一个基于 Vue.js 的跨平台开发框架,可以使用 postcss-px-to-viewport 插件来实现将 px 单位转换为 vw/vh 的功能。postcss-px-to-viewport 是一个 PostCSS 插件,可以帮助开发者自动将 px 单位转换为视窗单位(例如 vw、vh、vmin 或 vmax)。
要在 UniApp 中使用 postcss-px-to-viewport 插件,你需要按照以下步骤进行配置:
1. 在项目根目录下找到 postcss.config.js 文件(如果不存在,则需要手动创建)。
2. 在 postcss.config.js 文件中添加以下配置代码:
```javascript
module.exports = {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: 'px', // 需要转换的单位,默认为 px
viewportWidth: 750, // 设计稿的视口宽度
unitPrecision: 5, // 转换后的精度,即小数点位数
propList: ['*'], // 需要转换的 CSS 属性列表,* 表示所有
viewportUnit: 'vw', // 转换后的视口单位
fontViewportUnit: 'vw', // 字体使用的视口单位
selectorBlackList: [], // 需要忽略的 CSS 选择器,例如 '.ignore',则 .ignore 不会被转换
minPixelValue: 1, // 小于或等于 1px 不转换为视口单位
mediaQuery: false, // 是否允许在媒体查询中转换 px
replace: true, // 是否直接替换原样式
exclude: [/node_modules/] // 需要忽略的文件路径
}
}
}
```
以上配置中,viewportWidth 表示设计稿的视口宽度,根据这个值来计算需要转换的单位。其他配置项可以根据需要进行调整。
3. 重新启动项目,postcss-px-to-viewport 插件将会自动将项目中的 px 单位转换为 vw/vh。
希望这些信息对你有所帮助!如果你还有其他问题,请随时提问。
uniapp使用postcss-px-to-viewport
对于uniapp项目中使用postcss-px-to-viewport,你可以按照以下步骤进行配置:
. 首先,安装相关依赖。在项目根目录下执行以下命令:
```
npm install postcss-px-to-viewport --save-dev
```
2. 在项目根目录中找到`postcss.config.js`文件(如果没有则新建一个),并进行如下配置:
```javascript
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 750, // 设计稿的宽度
unitPrecision: 3, // 转换后的小数位数
viewportUnit: 'vw', // 转换的单位
selectorBlackList: ['.ignore'], // 忽略转换的CSS选择器,使用.ignore类名可以忽略
minPixelValue: 1, // 最小的转换数值
mediaQuery: false, // 是否在媒体查询中也进行转换
},
},
};
```
可以根据实际需求修改`viewportWidth`的值,以及添加其他配置项。
3. 在`vue.config.js`文件中添加postcss配置:
```javascript
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-px-to-viewport')({
viewportWidth: 750, // 设计稿的宽度
unitPrecision: 3, // 转换后的小数位数
viewportUnit: 'vw', // 转换的单位
selectorBlackList: ['.ignore'], // 忽略转换的CSS选择器,使用.ignore类名可以忽略
minPixelValue: 1, // 最小的转换数值
mediaQuery: false, // 是否在媒体查询中也进行转换
}),
],
},
},
},
};
``