I've been using this plugin postcss-px-to-viewport-vite-plugin for years on Vuejs projects.
In summary it coverts all 'px' to 'vw'
using Postcss. After runtime, on Chrome debug mode, you can see tha all 'px
' are translated to 'vw
' correctly. The only thing I must do to set the configuration up is install the Plugin and create postcsss config file.
I've been trying to set the same configuration on React, but no way!
After the app is up and running, I still see all px
!
My postcss.config.js
on vuejs project :
module.exports = {
plugins: [
{
"postcss-px-to-viewport": {
options: {
unitToConvert: "px",
viewportWidth: 1900,
unitPrecision: 5,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: undefined,
include: undefined,
landscape: false,
landscapeUnit: "vw",
landscapeWidth: 568,
},
},
},
],
};