uni-app 无法使用postcss-px-to-viewport

dzjeubhm 于 2022-11-02 发布在 uni-app

关注(0)|答案(1)|浏览(478)

问题描述

我已经了解有rpx做适应，但公司现在想让根据高度适应，而不是宽度。所以想到了postcss-px-to-viewport，但运行时报错

复现步骤

[复现问题的步骤]
npm install postcss-px-to-viewport --dev
编写postcss.config.js

module.exports = {
    plugins: {
        'autoprefixer': {
            browsers: ['Android >= 4.0', 'iOS >= 7']
        },
        "postcss-px-to-viewport": {
            viewportWidth: 667, // 设计稿宽度
            //viewportHeight: 1334, // 设计稿高度，可以不指定
            unitPrecision: 2, // px to vw无法整除时，保留几位小数
            viewportUnit: 'vh', // 转换成vw单位
            fontViewportUnit: 'vh',
            selectorBlackList: ['.ignore', '.hairlines'], // 不转换的类名
            minPixelValue: 1, // 小于1px不转换
            mediaQuery: false, // 允许媒体查询中转换
            // exclude: /(\/|\\)(node_modules)(\/|\\)/ //不转换我们引入的第三方包
        },
    }
}

点击hbuilder运行
[或者可以直接贴源代码]

实际结果

21:04:06.799  INFO  Starting development server...
21:04:24.931 Module build failed (from ./node_modules/postcss-loader/src/index.js):
21:04:24.935 Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-px-to-viewport'
21:04:24.939 (@D:\code\uniApps\easybuy-boss\postcss.config.js)
21:04:24.944     at load (D:\xx\HBuilderX\plugins\uniapp-cli\node_modules\postcss-load-config\src\plugins.js:28:11)
21:04:24.950     at Object.keys.filter.map (D:\xx\HBuilderX\plugins\uniapp-cli\node_modules\postcss-load-config\src\plugins.js:53:16)
21:04:24.957     at Array.map (<anonymous>)
21:04:24.963     at plugins (D:\xx\HBuilderX\plugins\uniapp-cli\node_modules\postcss-load-config\src\plugins.js:52:8)
21:04:24.969     at processResult (D:\xx\HBuilderX\plugins\uniapp-cli\node_modules\postcss-load-config\src\index.js:33:14)
21:04:24.970     at config.search.then (D:\xx\HBuilderX\plugins\uniapp-cli\node_modules\postcss-load-config\src\index.js:94:14)
21:04:24.976     at <anonymous>

系统信息: