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


 <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">
<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


export default class AnnouncementsWebPart extends BaseClientSideWebPart<IAnnouncementsProps> {
public constructor() {

Can i load css files this way ?


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.