knowledgecenter-breadcrum

Knowledge Center

28 Aug, 2020

How to include custom CSS File in React PCF Control?

Posted on 28 Aug, 2020 by Admin, Posted in Dynamics 365 Power Platform Dynamics-365 Sales

How to include custom CSS File in React PCF Control? Blogs

How to include custom CSS File in React PCF Control?

Introduction

In the previous blog, we have seen the how-to setup the react in PCF control. Now, in this blog, we will see how we can configure custom “.CSS” file in React PCF Control Project.

Problem

If we directly add the CSS file in project and after running the build command, we get below error:

For e.g. I have a created a below PCF control project, and I want to use the custom CSS from “CSS file” in same project.

Now, to use the CSS from custom file, I have added the Custom “style.css” file as shown below:

But, when I run build command in VS2019 command prompt, then I get error as “You may need an appropriate loader to handle this file type.

Solution

To resolve the above issue please follow below steps:

  1. Go to, nodemodules > PCFscript > webpackConfig.js
  2. In the “WebpackConfig.js” file, add below content:

Content

{
  test: /\.css$/,
  use: [ 'style-loader', 'css-loader']
}

WebpackConfig.js

Under “getWebpackConfig” function add above content as show below:

  1. After updating above file, run below command in “VS2019” command prompt:

npm i css-loader style-loader – -save-dev

After this, now we can use the external CSS file in our PCF Control Project.

 

 

 

Comment

This is a Required Field

Loading

Recent Updates

Email Storage Made Easy: Dynamics 365 Space Saving Tips
Blogs
29 Feb, 2024

Email Storage Made Easy: Dynamics 365 Storage Saving Tips

Email Storage Made Easy: Dynamics 365 Storage Saving Tips Introduction Microsoft's latest feature allows you to migrate email descriptions from CRM…

READ MORE
Blogs
28 Feb, 2024

How to enable the enhanced email template editor in Dynamics 365?

How to enable the enhanced email template editor in Dynamics 365? To activate the Enhanced Email Template editor for your…

READ MORE
RCA for ARC Migration Issue
Blogs
28 Feb, 2024

Troubleshooting Convert Rules Import Issue: Entity 'workflow' with ID Does Not Exist error in D365

Troubleshooting Convert Rules Import Issue: Entity 'workflow' with ID Does Not Exist error in D365 Problem Statement We implemented D365 Customer…

READ MORE