I am working on a SP online project, we have a dev site (/teams/ABCDev) and a production site (/teams/ABCProd). The Style library path is /teams/[Site]/Style Library.

When I am referencing any item from the style library in the home page (/teams/[site]/Pages/Default.aspx) I use ../style library/[Item]. Everything is working fine.

the problem happens when SP opens the site as /teams/[Site]/ without the (/Pages/Default.aspx), in this case, the (../style library) will point to /teams/Style library (which doesn't exist) instead of /teams/[site]/Style library

Is there a solution for this issue without having to use the path (/teams/ABCProd and /teams/ABCDev) and having to change it from dev to production?

  • Why don't you put all your stuff in root-site Style Library and point it to like ~/Style Library/FolderName/filename or ~sitecollection/Style Library/FolderName/filename May 6, 2014 at 19:57
  • ~sitecollection is a server side token, in SP online you can not use Server side code, only client side. May 7, 2014 at 19:29

2 Answers 2


Since you're on SP online, you could make use of the root site which is https://yoursite.sharepoint.com, create a SiteAssets library if not already there, and create folders within it such as scripts, styles, images. For this library give Read permission to 'Everyone'. If you keep your assets within this root folder, you could reference your files using the full url

<script type="text/javascript" src="https://yoursite.sharepoint.com/SiteAssets/scripts/jQuery-1.9.1.min.js"></script>

This way when you're building apps, you could refer your assets by full url and utilize the caching mechanism. The browser will not attempt to re-download since it know it's already there. Useful for apps/Iframes.

or you could still use it as:

<script type="text/javascript" src="/SiteAssets/scripts/jQuery-1.9.1.min.js" />

P.S Above are my suggestions, not saying it's a best practice. This approach has been increasingly common for SPOnline. I would be happy to know what others are doing.

  • The problem is that i have no access to the yoursite.sharepoint.com this top level site is corporate level and my project can only go to yoursite.sharepoint.com/Teams/ABCSite. So my Style library is actually at yoursite.sharepoint.com/Teams/ABCSite/Style Library. May 7, 2014 at 19:31
  • To keep it in globally accessible place, you need to add it to your top level site. If there's no site existing in there, you can ask your admin to create a team site there. If you decide to add your assets within Site Collection level, you'll run into issue as you stated before. Or you can create another wsp that would need to be deployed to each site collection, but you'll end up with multiple copies of assets and for updates that's again another nightmare.
    – Aveenav
    May 7, 2014 at 20:05

I ended up using this for CSS files

<!--SPM:<asp:Literal runat="server" Text="&#60;link rel='stylesheet' type='text/css' href='"/>--><!--SPM:<asp:Literal runat="server" Text="&#60;% $SPUrl:~sitecollection/Style%20Library/css/grid.css %&#62;"/>--><!--SPM:<asp:Literal runat="server" Text="'&gt;"/>-->

and Using Script On Demand SP.SOD to load JS files

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.