How to add css in some page only?

Hello,

From this document ( https://guides.emberjs.com/v2.14.0/addons-and-dependencies/managing-dependencies/ ) it show me to add external js, css and “compile” into a single file but how to add css in some page only?

For example: I have many css and js that is already imported into ember-cli-build.js and will be compiled to vendor.css, vendor.js. Now I have jquery-ui.css which is too large to compile into a single vendor.css file. That jquery-ui.css will be use in few pages so it is no need to appears in vendor.css all the time.

How to add css in some page only?

Perhaps change the body class?

Or if it is a page in an outlet add a

with a class around that page.

You can use some of the model hooks (beforeModel, model, afterModel) to load a file from your public folder. For example:

beforeModel() {
  let link = '<link href="jquery-ui.css" rel="stylesheet" id="jquery-ui-css" />';
  
  if (!document.querySelector('#jquery-ui-css')) { // Already loaded?
    document.getElementsByTagName("head")[0].appendChild(link);
  }
}
1 Like

Try it both ways and benchmark it - it’s likely not an issue. jQuery UI and Ember feels like = Atari + Switch?