1

this is the html file contains referecence to local css files in same directory.

demo.html

 <title>Demo Template</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/swiper.css">
</head>
<body>
<div id="simplecontainer">

Now I created a SPFx web part(with reactJs) and contains same html element, so I need to load these css files.. how can I make this works as it in the html page above.

if they were small, I can copy and paste all into "myweppart.module.scss" ? but its not efficient I think

EDITED:

export default class AnnouncementsWebPart extends BaseClientSideWebPart<IAnnouncementsProps> {
public constructor() {
    super();
    SPComponentLoader.loadCss('../mylocalcssfile.css');

Can i load css files this way ?

Improve this question

1 Answer 1

Reset to default
3

Upload your css files to Style Library. You can find style library from site content and give URL of that css to

SPComponentLoader.loadCss('file path here')

you can see file path from style library, select your css file click on ECB menu and select get a link or open file.get a link

Improve this answer
1
  • Thanks @Jinesh, What abt multiple environments? Is there anyway to give relative URL of SharePoint style library path?
    – Nithin CV
    Commented May 26, 2020 at 13:09

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.