设置 postcss 以使用 VH 修复答案

【问题标题】：Settings up postcss to use VH fix设置 postcss 以使用 VH 修复
【发布时间】：2021-06-29 09:42:02
【问题描述】：

我正在尝试使用 PostCSS 来解决 100vh 不考虑移动设备上的浏览器/导航栏的问题。

问题是，我不知道如何设置它，并且说明假设我知道如何设置。我对 JavaScript 的经验很少，不使用任何框架，也不知道如何使用，我只是在 VS Code 中做所有事情，没有插件。

我在 VS Code 中安装了 PostCSS 扩展，但不确定下一步该做什么。

安装说明：

“然后将此javascript添加到public/index.html（用于React），或添加到template.html（用于Preact）。”

我不使用 React（我不认为？），那么我该怎么做呢？

然后它说：

“检查您的项目是否存在 PostCSS 配置：项目根目录中的 postcss.config.js、package.json 中的“postcss”部分或捆绑配置中的 postcss。

如果您已经使用 PostCSS，请将插件添加到插件列表中："

postcss.config.js 会在我的根文件夹中吗？我应该创建这个文件吗？

然后它说要这样做：

module.exports = {
  plugins: [
+   require('postcss-viewport-height-correction'),
    require('autoprefixer')
  ]
}

我将它添加到我的 .js 文件中（或者它是否在 css 文件中？），并且收到错误“未定义模块。”

是否有人可以像我不知道自己在做什么并且只使用 JavaScript 和 VS Code 一周一样来指导我？因为这就是我所在的地方。

如果有什么不同，我在 Windows 上。

部分说明说要做：

npm install --save postcss-viewport-height-correction

我不知道在哪里输入这个命令。我多次遇到类似的说明，查找“如何进行 npm 安装”并没有产生任何结果。我一直在避免在 JavaScript 中使用框架、扩展和插件，因为我永远无法弄清楚如何使用它们，而且我能找到的每一个指南都假设我已经知道这一切意味着什么。

【问题讨论】：

【解决方案1】：

可能是一个冗长的答案，但我会尽力回应一切。

PostCSS 是一个基于 JS 的工具，用于使用 JS 插件转换样式。通常，您将其用作前端构建工具（例如 Webpack、Rollup 等）的插件。您也可以将其用作 CLI 应用程序，手动运行构建。

我只是在 VS Code 中做所有事情，没有插件。

您使用哪个编辑器无关紧要。您如何构建此内容？它只是普通的 HTML 和 CSS 文件吗？

我在 VS Code 中安装了 PostCSS 扩展

那个扩展只是为了让你的编辑器和你的 PostCSS 配置在同一个页面上。例如，您可能会使用 PostCSS 配置编写一些 CSS，这些 CSS 在您的编辑器中看起来像是完全无效的 CSS，并且会抛出错误。该扩展确保它遵循与您的 CSS 现在相同的更改规则，因为您使用的是更改规则的工具。

postcss.config.js 会在我的根文件夹中吗？我应该创建这个文件吗？

是的

我将它添加到我的 .js 文件中（或者它是否在 css 文件中？），并且收到错误“未定义模块。”

JS，但它会抛出错误，因为你需要安装它

部分说明说要做：

npm install --save postcss-viewport-height-correction

我不知道在哪里输入这个命令。

从您的终端。 NPM（和 Yarn，如果你遇到它的话）是一个用于安装 Node 包的 CLI 工具，比如这里的 PostCSS。

【讨论】：