Блог

При использовании следующего в моей конфигурации 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, приведенное выше правило применяется, как и ожидалось.

Более конкретно:

• когда [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 was установлен, вам может потребоваться настроить 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
  }
}
  

Это репозиторий vanilla-js-prototype-starter на github webpack PostCSS настроен и работает хорошо, проверьте и посмотрите, может ли это немного помочь.