postcss-px2rem怎么配置
时间: 2023-09-11 14:04:50 浏览: 51
您可以在 webpack 配置文件中使用 postcss-loader 搭配 px2rem 插件来进行配置。在 postcss.config.js 文件中,需要添加以下代码:
```
module.exports = {
plugins: {
autoprefixer: {},
'postcss-px2rem': {
remUnit: 75 //这里是你设计稿宽度/10,比如750宽度,750/10=75
}
}
}
```
这样就可以自动将 px 转为 rem 值了。
相关问题
postcss-pxtorem配置
postcss-pxtorem是一个PostCSS插件,用于将像素(px)单位转换为rem单位。根据提供的引用内容,可以看出有两个不同的配置示例。
配置示例1:
```javascript
'postcss-pxtorem': {
rootValue ({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75
},
propList: ['*']
}
```
在这个配置示例中,rootValue函数根据文件名中是否包含'vant'来决定根元素的值。如果文件名中包含'vant',则根元素的值为37.5,否则为75。propList属性设置为['*'],表示将所有属性的像素值都转换为rem单位。
配置示例2:
```javascript
Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
```
这个配置示例中出现了一个错误,提示postcss-pxtorem插件需要PostCSS 8版本。这意味着你需要确保你的PostCSS版本符合插件的要求。
postcss-pxtorem配置vue2
在Vue2中配置postcss-pxtorem,你可以按照以下方式进行配置:
方式一:
在vue.config.js中添加以下代码:
```javascript
const px2rem = require('postcss-px2rem')
const postcss = px2rem({
remUnit: 75 // 基准大小 baseSize,需要和rem.js中相同
})
module.exports = {
/* 注意sass,scss,less的配置 */
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
css: {
loaderOptions: {
postcss: {
plugins: \[
postcss
\]
}
}
}
}
```
方式二:
在vue.config.js中添加以下代码:
```javascript
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: \[
require('postcss-px2rem')({
remUnit: 30 // 配置项,详见官方文档
}),
// 其他插件
\]
}
}
}
}
```
方式三:
在vue.config.js中添加以下代码:
```javascript
var px2rem = require('postcss-px2rem');
module.exports = {
module: {
loaders: \[
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
\]
},
postcss: function() {
return \[px2rem({remUnit: 75})\];
}
}
```
请注意,如果你遇到了"Error: PostCSS plugin postcss-pxtorem requires PostCSS 8"的错误,这可能是因为缺少相应的插件。你需要安装postcss和postcss-loader这两个插件来解决这个问题。
#### 引用[.reference_title]
- *1* *2* [使用postcss-plugin-px2rem和postcss-pxtorem(postcss-px2rem)-px自动转换rem的配置方法-vue-cli3.0](https://blog.csdn.net/JackieDYH/article/details/115463646)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue2移动端适配插件‘postcss-pxtorem](https://blog.csdn.net/weixin_61211370/article/details/129299542)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)