Share via

Where is the best place to insert references to CSS files?

Toriyama 291 Reputation points
2022-06-01T09:07:34.947+00:00

In my sharepoint framework (No JavaScript Framework) project I know I can use CSS in the following ways:

Right at the beginning in the imports section:
There is the SCSS standard
import styles from './WebPart.module.scss';

Reference to css the solution
require('style library/css/File.css')

Reference to external css (I don't know if I can reference internal css this way with SPComponentLoader.loadCss)
SPComponentLoader.loadCss("https://site/bootstrap/css/bootstrap.min.css");

Inside onInit
SPComponentLoader.loadCss("https://site/bootstrap/css/bootstrap.min.css");
or (Use a css file from your own sharepoint site)
SPComponentLoader.loadCss("https://site.sharepoint.com/sites/site/Documents/file.css");

Or even in the HTML file like this
<link rel="stylesheet" type="text/css" href="" />

What would be the best way, or whatever?

Thank you

Microsoft 365 and Office | SharePoint | Development
Microsoft 365 and Office | SharePoint Server | Development
0 comments
Accepted answer
  1. Sreeju Nair 12,666 Reputation points
    2022-06-01T09:12:51.567+00:00

    For SharePoint framework, the recommendations to use CSS is well documented. Please refer

    https://learn.microsoft.com/en-us/sharepoint/dev/spfx/css-recommendations

    For external CSS (whether it is loaded from SharePoint or from external websites) refer the following

    https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/reference-third-party-css-styles

    Hope this helps

    1 person found this answer helpful.
    0 comments

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Tong Zhang_MSFT 9,251 Reputation points
    2022-06-02T09:07:26.23+00:00

    Hi @Toriyama ,

    I agree with sreejukg' answer ,you can refer to these documents and choose the appropriate way according to your requirements.

    For reference:

    Reference third-party CSS styles in SharePoint Framework web parts:
    https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/reference-third-party-css-styles

    Recommendations for working with CSS in SharePoint Framework solutions:
    https://learn.microsoft.com/en-us/sharepoint/dev/spfx/css-recommendations

    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.