uniapp使用postcss-pxtorem
时间: 2023-10-16 13:10:54 浏览: 53
对于uniapp项目中使用postcss-pxtorem,你可以按照以下步骤进行配置:
1. 首先,安装相关依赖。在项目根目录下执行以下命令:
```
npm install postcss-pxtorem --save-dev
```
2. 在项目根目录中找到`postcss.config.js`文件(如果没有则新建一个),并进行如下配置:
```javascript
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5, // 设计稿宽度的十分之一,如果设计稿宽度是750,则这里设置为75
propList: ['*'],
selectorBlackList: ['.ignore'], // 忽略转换的CSS选择器,使用.ignore类名可以忽略
},
},
};
```
可以根据实际需求修改`rootValue`的值,以及添加其他配置项。
3. 在`vue.config.js`文件中添加postcss配置:
```javascript
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 37.5, // 设计稿宽度的十分之一,如果设计稿宽度是750,则这里设置为75
propList: ['*'],
selectorBlackList: ['.ignore'], // 忽略转换的CSS选择器,使用.ignore类名可以忽略
}),
],
},
},
},
};
```
4. 配置完成后,重新启动uniapp项目,此时CSS中的px单位会自动转换为rem单位。
请注意,以上步骤适用于uniapp项目使用postcss-pxtorem进行px到rem的转换。如果你使用的是其他构建工具或框架,可能会有些许差异,请根据实际情况进行相应配置。