Adding a separate IE stylesheet

sage
1

So this seems like a pretty easy question. I am not quite sure the best way to do it in Sage. I’d like to add a new stylesheet just for IE. Enqueing it is pretty simple in assets.php:

  global $wp_styles;
  wp_enqueue_style('sage_css', asset_path('styles/main.css'), false, null);
  wp_enqueue_style('ie_css', asset_path('styles/main-ie.css'), false, null);
  $wp_styles->add_data( 'ie_css', 'conditional', 'lt IE 9' );

The silly problem I am having is getting the css file to its final destination. The new gulpfile, while sexy and awesome, is well above my head in terms of making any serious adjustments. Is there a documented way to add another stylesheet to assets/styles and then build it to dist/styles?. Obviously if I just drop in right in /dist/styles it will get deleted upon build.

Thanks in advance!

2

In manifest.json, ask asset-builder to make you a new file called main-ie.css

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "main-ie.css": {
      "files": [
        "styles/main-ie.scss"
      ]
    },
    "editor-style.css": {
      "files": [
        "styles/editor-style.scss"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    },
    "modernizr.js": {
      "bower": ["modernizr"]
    }
  },
  "config": {
    "devUrl": "http://example.dev"
  }
}

Now just make a new file called main-ie.scss next to main.scss and put whatever you want in there. Don’t forget to add the wiredep lines from main.scss if you’re trying to include everything. I would think you’d want to put IE ONLY styles in the ie stylesheet though, to avoid duplication, but it’s not my project.

Then run gulp.

2 Likes
3

The default Sage manifest.json file already includes two stylesheets so it acts as an example of how to do what you want: https://github.com/roots/sage/blob/71c2e78b0e42c1a86adba8d4a30e1b6d9df17dff/assets/manifest.json

Some docs here: https://roots.io/sage/docs/theme-development/

Also the documentation from asset-builder:


1 Like
4

Thanks Gents. That worked. Cheers!

1 Like