both introduce
to solve this problem through css selector priority
when talking a little more specifically about ie9, The swiper container adds the class name isIE9
and then everything in idangerous.swiper.css is prefixed with .isIE9
to ensure that the priority is higher than that in swiper.min.css

first of all, make it clear that webpack is packaged, which can be understood as the compilation time, and there is no way to predict the runtime environment during the compilation time.

can provide you with the following implementation ideas:

1. is also mentioned by the students upstairs, adding a specific class prefix, but this modification is very expensive. How many class are there in the unpredictable CSS file
2. use System.import () , but make sure you use the ExtractTextPlugin plugin. Remember to set the ExtractTextPlugin configuration allChunks: true in the webpack configuration file (this scheme cannot export CSS files directly, but CSS in JS )
3. introduce the CSS file directly into the project as a string, and judge the environment to manually generate link tags

several solutions, you can try a wave, and you are not sure whether there are any other solutions based on webpack

A grumpy dynamic creation of link tags can be implemented in native js in index.html

based on webpack, you can consider some methods upstairs to practice the pros and cons

.

just replace import with require

if (!isIE9) {
  require('swiper/dist/css/swiper.min.css')
} else {
  require('swiper2/dist/idangerous.swiper.css')
}

=
Why is it possible to test why it was stepped on? in principle, both import and require, are finally converted to webpack_require.
main.js randomly loads css

var r = Math.random();
if(r>0.5) {
    require('./assets/css1.css')    
}else {
    require('./assets/css2.css')    
}

css1:

body {
    background-color: -sharp2C3E50;
}

css2:

body {
    background-color: cadetblue;
}

effect

csswebpacknavigator

webpack's require.ensure can see that it is the

if(!isIE9){
    require.ensure([], function () {
        require('swiper/dist/css/swiper.min.css');
    })
}else{
    require.ensure([], function () {
        require('swiper2/dist/idangerous.swiper.css');
    })
}

how to use it, you can take a look at it in the document

is actually the problem of js loading css on demand.

const loadCss = url => {
  let link = document.createElement("link");
  link.setAttribute("rel", "stylesheet");
  link.setAttribute("type", "text/css");
  link.setAttribute("href", url);
  document.body.appendChild(link);
};

if(!isIE9)
  loadCss(...)
else
  loadCss(...)

the loaded address must be static, and it is good to use [if lt IE 9] to judge