如何防止'postcss-preset-env'删除CSS逻辑属性？

在我的 Webpack 配置中使用以下内容时：

{
  test: /\.scss$/i,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: { importLoaders: 1 },
    },
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [
            [
              'postcss-preset-env'
            ],
          ],
        },
      },
    },
    "sass-loader"
  ],
},

我注意到有时像下面这样的 CSS 规则会从捆绑的 CSS 输出中删除。

img {
  margin-inline-end: 1rem;
}

删除上述 Webpack 配置时，将按预期应用上述规则。

进一步来说：

• when an [dir="rtl"]属性设置在html元素，即margin-inline-end: 1rem;风格存在
• 当。。。的时候dir属性未设置，则margin-inline-end: 1rem;捆绑输出中不存在样式
• 当。。。的时候'postcss-preset-env'插件被删除，margin-inline-end: 1rem;无论是否存在，风格都存在[dir]属性

是什么导致了这种行为以及如何在继续使用的同时禁用它postcss-preset-env对于其他事情，比如autoprefixer?

默认情况下postcss-preset-env正在处理阶段 2+ 规则，具体取决于cssdb安装后，您可能需要调整stage使用时的选项postcss-preset-env到更高的值，例如stage: 3.

看起来像一些逻辑属性margin-inline-end将被处理成

[dir='ltr'] { margin-right: 1rem } ...

此外，还可以在选项中精确禁用规则：

{
  /* use stage 2 features + disable logical properties and values rule */
  stage: 2,
  features: {
    'logical-properties-and-values': false
  }
}

这个 github 仓库vanilla-js-原型-启动器 has webpack & PostCSS配置运行良好，检查一下是否能有所帮助。