How to add css in some page only?


#1

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?


#2

Perhaps change the body class?

Or if it is a page in an outlet add a

with a class around that page.

#3

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);
  }
}

#4

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