Модули css, postcss + веб-пакет с резервной версией IE 11

Question

Мой вопрос больше подходит. У меня есть проект, который использует только CSS, с пользовательскими свойствами CSS. vars например. Этот проект реагирует, с включенными модулями CSS. Со структурой, как показано ниже:

component -- folder1 ---- folder1.css -- folder2 ----folder2.css node_modules -- module1 ---- module1.css

В локальном проекте у меня есть webpack, с загрузчиком postcss и следующими плагинами:

{
   loader: "postcss-loader",
   options: {
    ident: "postcss",
    plugins: loader => [
      require("postcss-import")({ root: loader.resourcePath, skipDuplicates: true }),
      require("postcss-preset-env")()
      ]
    }
}

В обоих местных component и node_modules*.css файлы есть :root определения. Для каких переменных установлены.

Для примера у меня есть файл цветов со всеми определенными цветовыми переменными.

Моя цель состоит в том, чтобы в разработке и производстве у меня было все var() выведите значение IE 11. Так скажем, цвет var(--color-black) это вывело бы color: #000 & color: var(--color-black),

Что происходит, я должен импортировать в каждом модуле, чтобы появился запасной вариант. Это работает только для локальных CSS-файлов в компоненте, но не для node_modules. Это также относится к тому же :root значения несколько раз.

То, что я ищу, - это то, что могли бы сделать другие, которые используют наименьшее количество конфигураций postcss для достижения чего-то, что будет работать в IE 11+, но все же позволит только писать будущие css.

Любая помощь будет оценена.

Answer 1

Можете добавить browsers: 'last 2 versions' в ваш файл конфигурации postcss, чтобы получить запасные версии для старых браузеров, вот пример моей конфигурации в реальном проекте.

postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-preset-env': {
      browsers: 'last 2 versions',
      features: {
        'nesting-rules': true,
        'custom-media-queries': true,
        'color-mod-function': true
      }
    },
  },
}