cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
jhashwani
Regular Visitor

Custom css file to include in react Component PCF

Hi Folks, I am trying to use custom css styling with react components in PCF and trying to import the file as like we do in regular react project. However, I am getting the following error when trying to build the project. Error: You may need an appropriate loader to handle this file type, currently no loader are configured to process this file. see https://webpack.js.org/concept#loaders Also, the styling file for the component, do I need to include that in Menifest file? (I did get the error regardless..) Any help is appreaciated. Thanks
12 REPLIES 12
DianaBirkelbach
Super User
Super User

HI @jhashwani 

Yes, you just need to declare the css in your manifest. You cannot import the css in the index.ts.

The css will be loaded automatically by the framework for you.

Best regards,

Diana

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."
v-xida-msft
Community Support
Community Support

Hi @jhashwani , 

Yeah, I agree with @DianaBirkelbach 's thought almost. If you want to reference the CSS Style within your PCF project, you need to declare it within the ControlManifest.Input.xml:

<?xml version="1.0" encoding="utf-8" ?>
<manifest>
  <control namespace="SampleNamespace" constructor="TSLinearInputComponent" version="1.0.0" display-name-key="TSLinear Input Component" description-key="Allows you to enter the numeric values using the visual slider" control-type="standard">
    <!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
    ....
    ....
    <resources>
      <code path="index.ts" order="1"/>
      <css path="css/TS_LinearInputComponent.css" order="1" />
      <!-- declare your css style as below -->
      <css path="css/yourCustomCSS.css" order="1" />
    </resources>
  </control>
</manifest>

Of course, you must import your custom css file under the css folder under your PCF Project folder firstly.

 

Best regards,

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

As already mentioned - you will need include the css as a statically loaded file - rather than using the normal import './some.css'

 

It's also worth mentioning that it's best practice to use the class prefix for your css based on the control name.

So if your control name is 'myawesomepcf' and you wanted all your divs to have a red background, it would be ;

.myawesomepcf div {
background:red
}

 

This is because the container that the PCF is placed inside, is automatically given a class of the same name of your control (excluding the namespace).

 

Hope this helps

What is the recommendation when you run into this scenario in one of your dependencies in node_modules?

Imagine one dependency requiring another dependency, and using this approach, would you modify the file in the node_modules?

You mean if there is some standard css that is required by a component you using and packing into your PCF bundle.js?

 

If that's the case - you'd need to include the required css - best practice states that you should prefix the css classes with the namespace - however I can imagine if the css is very complex this wouldn't be practical.

 

Provided the css is unique enough then the risk of it overlapping with other css is slim - but the risk will always be there!

 

If i install an NPM package to use within the control for example, if that control is using techniques to import CSS stylesheets within it, to give you an example:

 

One of the NPM packages I'm using has the following:

 

import 'tippy.js/dist/tippy.css'// eslint-disable-line import/extensions
import 'tippy.js/animations/scale.css'// eslint-disable-line import/extensions
 
This ends up throwing the following error:
 
ERROR in ./node_modules/tippy.js/dist/tippy.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
ERROR in ./node_modules/tippy.js/animations/scale.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I
If i remove those imports, and get it in the bundle it starts failing all around... and honestly i dont believe fiddling around with NPM packages is not the best thing to do...

Ah I see - the only supported way of including CSS in PCF right now is by including the css or by using inline styles - the normal webpack css loader would add the css to a style tag on the page which isn't supported by PCF.

@ScottDurow  slightly off topic but of relevance is that that it seems iOS Safari completely ignores any styling added within a style attribute. Which results in some very strange results including text reverting to Times Roman and width information being completely ignored.

 

And iOS Safari is the core component used by the D365 and PowerApp iPhone and iPad tablet apps so it's safer all round to just use CSS classes.

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".

Hi @ben-thompson  - that's interesting. I've not seen this behaviour - I use inline styles with React quite a bit where there is dynamic styling and it works on the iOS and Android D365 and PowerApps native apps. Could you post some code that doesn't work for you and I'll give it a go this end! Would be good to get to the bottom of this.

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Users online (1,979)