安裝
yarn add postcss-px-to-viewportcraco.config.js
const path = require("path");
const pxtovw = require("postcss-px-to-viewport");
const my_pxtovw = pxtovw({
//這里是設(shè)計(jì)稿寬度 自己修改
unitToConvert: "px", // 要轉(zhuǎn)化的單位
viewportWidth: 750, // UI設(shè)計(jì)稿的寬度
unitPrecision: 6, // 轉(zhuǎn)換后的精度，即小數(shù)點(diǎn)位數(shù)
propList: ["*"], // 指定轉(zhuǎn)換的css屬性的單位，*代表全部css屬性的單位都進(jìn)行轉(zhuǎn)換
viewportUnit: "vw", // 指定需要轉(zhuǎn)換成的視窗單位，默認(rèn)vw
fontViewportUnit: "vw", // 指定字體需要轉(zhuǎn)換成的視窗單位，默認(rèn)vw
selectorBlackList: ["no-px-to-vw"], // 指定不轉(zhuǎn)換為視窗單位的類名，
minPixelValue: 1, // 默認(rèn)值1，小于或等于1px則不進(jìn)行轉(zhuǎn)換
mediaQuery: true, // 是否在媒體查詢的css代碼中也進(jìn)行轉(zhuǎn)換，默認(rèn)false
replace: false, // 是否轉(zhuǎn)換后直接更換屬性值
exclude: [/node_modules/], // 設(shè)置忽略文件，用正則做目錄名匹配
landscape: false, // 是否處理橫屏情況
});
const antdMobile_pxtovw = pxtovw({
viewportWidth: 750,
viewportUnit: "vw",
include:[/node_modules\/antd-mobile/]
});
module.exports = {
webpack: {
alias: {
"@": path.join(__dirname, "src"),
},
},
style: {
postcss: {
loaderOptions: {
postcssOptions: {
ident: "postcss",
plugins: [my_pxtovw, antdMobile_pxtovw],
},
},
},
},
};
文章來源地址http://www.zghlxwxcb.cn/news/detail-821234.html
文章來源：http://www.zghlxwxcb.cn/news/detail-821234.html
到了這里，關(guān)于react craco配置響應(yīng)式postcss-px-to-viewport的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
