vue使用postcss-pxtorem
时间: 2023-08-08 15:10:54 浏览: 140
在Vue项目中使用postcss-pxtorem插件可以将px单位转换为rem单位。以下是使用步骤:
1. 首先,确保你已经安装了postcss和postcss-pxtorem插件。可以通过以下命令进行安装:
```
npm install postcss postcss-pxtorem --save-dev
```
2. 在项目根目录下创建一个postcss.config.js文件,并在该文件中配置postcss-pxtorem插件。示例配置如下:
```javascript
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16, // rem基准值,通常为设计稿宽度的1/10或1/16
propList: ['*'], // 需要转换的属性,*表示所有属性
selectorBlackList: [] // 需要忽略的选择器,比如引入第三方UI库时需要排除
}
}
}
```
3. 在项目的build/webpack.base.conf.js文件中的postcss-loader配置中添加postcss-pxtorem插件。示例配置如下:
```javascript
const px2remConfig = {
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'postcss.config.js' // 指定postcss配置文件路径
}
}
}
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader',
px2remConfig // 添加postcss-pxtorem插件
]
},
// ...
]
},
// ...
}
```
4. 配置完成后,重新启动项目,此时px单位会自动转换为rem单位。
需要注意的是,postcss-pxtorem插件会将所有px单位转换为rem单位,如果你希望某些特定的属性不进行转换,可以在配置文件中的propList选项中添加对应的属性名。另外,如果你使用了第三方UI库,可能需要在配置文件的selectorBlackList选项中添加相应的选择器来排除转换。
阅读全文