React配置postcss-px-to-viewport
移動端適配
- 安裝依賴：在項目根目錄下運行以下命令安裝所需的依賴包：
npm install postcss-px-to-viewport --save-dev
- 配置代碼
const path = require('path');
module.exports = {
webpack: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
style: {
postcss: {
mode: 'exclude',
loaderOptions: {
postcssOptions: {
ident: 'postcss',
plugins: [
[
'postcss-px-to-viewport',
{
unitToConvert: 'px', // 要轉化的單位
viewportWidth: 375, // UI設計稿的寬度
viewportUnit: 'vw', // 指定需要轉換成的視窗單位，建議使用 rem
fontViewportUnit: 'vw', // 字體使用的視口單位
unitPrecision: 13, // 指定`px`轉換為視窗單位值的小數(shù)后 x位數(shù)
// propList: 當有些屬性的單位我們不希望轉換的時候，可以添加在數(shù)組后面，并在前面加上!號，如propList: ["*","!letter-spacing"],這表示：所有css屬性的屬性的單位都進行轉化，除了letter-spacing的
propList: ['*'], // 指定轉換的css屬性的單位，*代表全部css屬性的單位都進行轉換
// 轉換的黑名單，在黑名單里面的我們可以寫入字符串，只要類名包含有這個字符串，就不會被匹配。比如selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper這樣的類名的單位，都不會被轉換
selectorBlackList: ['ignore'], // 指定不轉換為視窗單位的類名，
minPixelValue: 1, // 默認值1，小于或等于1px則不進行轉換
mediaQuery: true, // 是否在媒體查詢的css代碼中也進行轉換，默認false
replace: true, // 是否轉換后直接更換屬性值
exclude: [/node_modules/], // 設置忽略文件，用正則做目錄名匹配
landscape: false, // 是否處理橫屏情況
},
],
],
},
},
},
},
};
- 重新啟動開發(fā)服務器：如果你的開發(fā)服務器正在運行，請重新啟動它以應用新的配置。
文章來源：http://www.zghlxwxcb.cn/news/detail-718916.html
之后當我們寫px時會自動轉換成vm單位文章來源地址http://www.zghlxwxcb.cn/news/detail-718916.html
到了這里，關于1-07 React配置postcss-px-to-viewport的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
