3

I am trying to link a static resource global css file to the head mark-up. The static resource is loading in the networks tab, but it is not applying the styles to my Aura and LWC components.

https://help.salesforce.com/s/articleView?id=sf.community_builder_page_head.htm&type=5

/sfsites/c/resource/stylesheet/css/global.css is loading

<link type="text/css" href="/sfsites/c/resource/stylesheet/css/ncic_global.css"
      rel="stylesheet">

How do I load a global stylesheet? I have done this with a custom theme in the past, but is this really the only way in order for aura and lwc components to get global styling?

Thanks!

Improve this question

3 Answers 3

Reset to default
1

Found your post, ran into this same issue, though I've gotten the static resource to load, I just can't get it to be site relative across sandboxes.

Try this:

<link rel="stylesheet" type="text/css" href="/{sitebase}/resource/{resourceid}/{resourcename}?{version}">

Where:

  • sitebase: is the site relative path (unless you're on a root domain)
  • resourceid: is the numeric resource id
  • resourcename: the name you gave your resource
  • version: a cache buster value, can be anything URL encoded that will force a new version

To get the static resource URL:

  • In your static resource screen
  • Right click "view"
  • Copy URL

My problem is when the community in our sandbox goes from a named site to a root site the pathing is all wrong.

Improve this answer
1

CSS in head markup should be global. Add these variable references in your link tag.

<link rel="stylesheet" href="{ basePath }/sfsites/c/resource/stylesheet/css/ncic_global.css?{ versionKey }" />

Head Markup doc for LWR Sites

Improve this answer
0

Your syntax for the link is correct. [see here, in line 8 of the example : https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/brand_custom_fonts.htm]

Then create the static resource correctly. For your example :

  1. create a static resource called 'stylesheet'
  2. add a folder to it called 'css' containing your ncic_global.css file
  3. make sure the static resource is public

Finally, add your link to the header of your LWR digital experience (LWR BYO or LWR microsite) :

<link rel="stylesheet" href="/sfsites/c/resource/stylesheet/css/ncic_global.css"/>

"sfsites" is an internal subpath of the LWR site, so it is necessary. You do not need to include the subpath of your site (community) since you are explicitly adding this link to the community's header markup.

When your site is published, the following HTML is generated:

<link rel="stylesheet" href="/mycommunitysubpath/sfsites/c/resource/stylesheet/css/ncic_global.css"/>

if your community's url is "mycommunitysubpath".

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .