Return to Question

added 255 characters in body

Source Link

edited Feb 6, 2017 at 10:28

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 ?

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

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 ?

Source Link

asked Feb 6, 2017 at 9:56

TyForHelpDude

load local css file in SPFx webpart

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

spfx spfx-webparts