react脚手架引入配置postcss-px-to-viewport或postcss-px2rem失效的问题
时间: 2023-12-06 09:36:18 浏览: 38
当使用react脚手架引入配置postcss-px-to-viewport或postcss-px2rem时,可能会出现失效的问题。解决方法如下:
1. 确保已经安装了相关的依赖包,例如postcss-px-to-viewport或postcss-px2rem。
2. 确保已经正确配置了postcss.config.js文件,例如:
```javascript
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 750,
viewportHeight: 1334,
unitPrecision: 3,
viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines'],
minPixelValue: 1,
mediaQuery: false
}
}
}
```
或者
```javascript
module.exports = {
plugins: [
require('postcss-px2rem')({remUnit: 75})
]
}
```
3. 确保在webpack配置文件中正确配置了postcss-loader,例如:
```javascript
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss', plugins: () => [
require('postcss-px-to-viewport')({
viewportWidth: 750,
viewportHeight: 1334,
unitPrecision: 3,
viewportUnit: 'vw',
selectorBlackList: ['.ignore', '.hairlines'],
minPixelValue: 1,
mediaQuery: false
})
]
}
}
]
}
```
或者
```javascript
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
require('postcss-px2rem')({remUnit: 75})
]
}
}
]
}
```
如果以上步骤都已经正确配置,但是还是失效了,可以尝试升级相关依赖包或者查看是否有其他配置文件覆盖了当前的配置。