收藏
回答

如何安装配置 postcss 插件 postcss-env-function?

.body {
  padding-top: calc(env(safe-area-inset-top) + var(--navigation-bar-height));
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

上面的安全区设置在模拟器上不生效(真机可以),顶部填充高度总是少了状态栏的高度,导致部分顶部内容被导航条挡住了,想通过 postcss 插件 postcss-env-function 来给模拟器设置安全区环境变量的默认值,但不生效。

具体安装配置过程如下:

1、在 miniprogramRoot(./miniprogram)下执行以下命令来安装 postcss-env-function 插件

npm install postcss-env-function --save-dev
{
  "name": "miniprogram",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@miniprogram-component-plus/tabs": "^1.0.0",
    "miniprogram-computed": "^6.0.2",
    "mobx-miniprogram": "^6.12.3",
    "mobx-miniprogram-bindings": "^5.0.0",
    "weui-miniprogram": "^1.5.6"
  },
  "devDependencies": {
    "postcss-env-function": "^7.0.0"
  }
}


2、在项目根目录下创建 postcss.config.js 文件,并配置安全区环境变量

module.exports = {
  plugins: {
    "postcss-env-function": {
      importFrom: {
        environmentVariables: {
          "safe-area-inset-top": "20px",
        },
      },
    },
  },
};



3、打开开发者工具“本地设置”里的“上传代码时样式自动补全”

是不是调试的时候不会经过 postcss 处理阶段?

回答关注问题邀请回答
收藏
登录 后发表内容