Salesforce B2B Commerce (LWR) - "global.css" style

Question

I'm quite new to B2B LWR, but I'm not new to web development in general.

I'm trying to understand what is the best way to have like a global.css (general css styles) and then particular css styles at LWC level.

So with B2B Commerce (LWR) I was researching what can be done but I failed to find the correct info on how should I approach this.

I tried to include in the head tag where I have other link tags a reference to a static resource called globalStyles (globalStyles.css)

<!-- General -->
<link rel="shortcut icon" href="{basePath}/assets/favicon.ico?{versionKey}">
<link rel="stylesheet" href="{basePath}/assets/css/font-awesome.css?{versionKey}">
<link rel="stylesheet" href="{basePath}/assets/css/theme.css?{versionKey}">


<!-- webruntime-branding-shared stylesheets -->
<link rel="stylesheet" href="{ basePath }/assets/styles/salesforce-lightning-design-system.min.css?{ versionKey }" />
<link rel="stylesheet" href="{ basePath }/assets/styles/dxp-site-spacing-styling-hooks.min.css?{ versionKey }" />
<link rel="stylesheet" href="{ basePath }/assets/styles/dxp-styling-hooks.min.css?{ versionKey }" />
<link rel="stylesheet" href="{ basePath }/assets/styles/dxp-slds-extensions.min.css?{ versionKey }" />

<link rel="stylesheet" href="{ basePath }/assets/themes/alpine.css?{ versionKey }" />

<!-- HERE IS THE GLOBAL STYLES -->
<link rel="stylesheet" href="(!URLFOR($Resource.globalStyles, 'globalStyles.css'))" />

But it seems URLFOR doesn't work, $Resource doesn't work... Don't exactly know how to reference that static resource file (css)

Answer 1

You can try this

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

Note: This answer was taken from this, for more detail.

https://salesforce.stackexchange.com/questions/363693/static-resource-stylesheet-in-head-markup-of-experience-builder-site

Doc Reference

Head Markup doc for LWR Sites

Answer 2

In LWR, you can just use :

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

Check this reference for more details: https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/template_differences_markup.htm