I would like to implement conditional IE CSS for IE8 and IE9 in my Angular application. The approach I took was to add the specific CSS files directly in the index file as shown below:
<!-- Application main stylesheet -->
<link href="styles/theme.css" rel="stylesheet">
<link href="styles/app.custom.css" rel="stylesheet">
<!-- endbuild -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="styles/basic.ie.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="styles/basic.ie8.css" />
<![endif]-->
However, when running the dist process using Grunt, all CSS files are merged into one minified file. As a result, the browser does not detect the individual CSS files meant for specific IE versions.
Is it necessary to modify the Grunt task to exclude these files from minification, or is there an alternative way to include them in the Angular application?
Please provide a solution.
Gruntfile.js
// Your Gruntfile.js content here
// This is a placeholder text for the content of your Gruntfile.js
// You can paste your actual Gruntfile.js code here