Создайте отдельный пакет CSS для IE с помощью Oldie, PostCSS и Webpack

Question

Я использую Webpack, Extract Text Plugin и PostCSS для создания своего CSS-пакета. Я использую Html Webpack Plugin для генерации index.html файл. Это мое webpack.config.js:

// imports

module.exports = {
  // entry point, etc.
  module: {
    loaders: [
      // other loaders here
      {
        test: /\.scss/,
        loader: debug ? 'style-loader!css-loader!postcss-loader!sass-loader' :
          ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!postcss-loader!sass-loader' })
      },
      {
        test: /\.css$/,
        loader: debug ? 'style-loader!css-loader!postcss-loader' :
          ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!postcss-loader' })
      },
    ]
  },
  plugins: [
    // other plugins here
    new ExtractTextPlugin('css/bundle.min.css'),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    }),
    new HtmlWebpackPlugin({
      template: './dev/index.ejs',
    }),
  ],
};

мой postcss.config.js:

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-object-fit-images'),
    require('oldie')({
      opacity: {
        method: 'copy'
      },
      rgba: {
        method: 'clone'
      }
    })
  ]
};

Я установил параметры RGBA и непрозрачности, чтобы скопировать оригинальные правила. Я пытался сделать то же самое с UnMQ (postcss для удаления медиазапросов для IE), но не смог найти никакой опции для копирования оригинальных медиазапросов. Я также попытался отключить это:

require('oldie')({
  opacity: {
    method: 'copy'
  },
  rgba: {
    method: 'clone'
  },
  unmq: {
    disable: true
  }
})

Медиа-запросы все еще не работают в Google Chrome и Firefox, если я не удаляю oldie из postcss.config.js, Теперь я хочу попробовать создать отдельный пакет CSS для IE и включить его в свой index.html аналогично примеру, приведенному на сайте Oldie:

<!--[if gt IE 8]><!--><link href="style.css" rel="stylesheet"><!--<![endif]-->
<!--[if lte IE 8]><link href="style.oldie.css" rel="stylesheet"><![endif]-->

Если это невозможно, предложите другой способ заставить Oldie работать для IE, но не затрагивать медиазапросы для других браузеров, которые его поддерживают.

Answer 1

Добавить предустановку.

Создавать postcss.config.js файл.

Настройте следующее, чтобы разрешить транспилирование:

      module.exports = {
    plugins: [
        require("postcss-preset-env")
    ]
};

Однако это не сработает, если вы не создадите список браузеров и не добавите целевой браузер (ы).

Итак, создайте .browserslistrc файл.

Настройте следующим образом или что-то еще:

      last 2 versions
>1%
ie11
maintained node versions
not dead

Это должно сработать.

В заключение, вам не нужно Олди. Хотя, если вы хотите использовать модуль, Gulp использует его, и это другая настройка. Webpack уже сильно упрощает.

Дай мне знать, как дела! :)