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

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

0 голосов
/ 03 мая 2018

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

...