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

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

0 голосов
/ 10 декабря 2018

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

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

В локальном проекте у меня есть веб-пакет, с загрузчиком 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.Для каких переменных установлены.

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

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

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

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

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

1 Ответ

0 голосов
/ 13 декабря 2018

Вы можете добавить 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
      }
    },
  },
}
...