Sharepoint Online | How To Properly Call Javascript and CSS files within an ASPX page?

Question

Sorry if this could already have been answered but I am new to Sharepoint Online.

With previous versions of Sharepoint, this has been working fine for me until now.

Upload an HTML, CSS and JS files within any document repository in Sharepoint
Call the CSS and JS files using traditional src="/RelativePathToTheCSSandJSFiles"

With Sharepoint online, this seems to no longer work. For testing purposes, what I do now is this:

Upload .ASPX file within the default Document folder of a site collection I created
Upload the CSS and JS files within the default Style Library Folder

Am I doing this the right way? Please help.

Is there a reason to upload .aspx pages in SharePoint that way? What are you trying to do? — Mohamed Derhalli, Commented May 29, 2020 at 13:11
OK, but what are you trying to do? Why are you creating custom aspx pages rather than using SharePoint pages themselves? Do you need to have custom code in there? — Mohamed Derhalli, Commented May 30, 2020 at 13:38
Yes. I will be adding custom JS and CSS together with the custom HTML — Alex M, Commented Jun 1, 2020 at 16:19
The way to do it is with SPFx, is there a reason to go for aspx pages rather than spfx web parts? — Mohamed Derhalli, Commented Jun 2, 2020 at 13:16

Chelsea_MSFT · Accepted Answer · 2020-05-29 05:41:47Z

0

Consider using <SharePoint:CssRegistration> content placeholder, which defines the CSS file:

<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/CSSTest.css%>" runat="server"/>

And at runtime:

<link rel="stylesheet" href="/sites/KnowledgeManagement/Stype%20Library/CSSTest.css" type="text/css" media="all" />

References:

answered May 29, 2020 at 5:41

Chelsea_MSFT

4,5921 gold badge7 silver badges10 bronze badges

Thanks Chelsea_MSFT. Sorry but I am new to this. Given the structure I have shown above, where do I input the <SharePoint:CssRegistration> code? Can I put that within the ASPX file I created within the Documents folder?
– Alex M
Commented Jun 1, 2020 at 16:21
1

@AlexM If you just want to call the css file within one aspx file, the line you provide in the original post should work as expected. Another reference: sharepoint.stackexchange.com/questions/221030/…
– Chelsea_MSFT
Commented Jun 2, 2020 at 6:35
Absolute URL to the CSS file worked! Thanks!
– Alex M
Commented Jun 4, 2020 at 19:59

Add a comment |

1 Answer 1