Unanswered

Custom css file to include in react Component PCF

(0) Share

Report

Posted on by jhashwani

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

Categories:

Power Apps Pro Dev & ISV

Capture.JPG

I have the same question (0)

All responses (12)

Answers (0)

Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report

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

Was this reply helpful? Yes No
v-xida-msft on at

Like (0)

Report
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">  .... .... <resources> <code path="index.ts" order="1"/> <css path="css/TS_LinearInputComponent.css" order="1" />  <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,

Was this reply helpful? Yes No
ScottDurow 1,039 on at

Like (2)

Report
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

Was this reply helpful? Yes No
alvarezskinner 12 on at

Like (0)

Report

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?

Was this reply helpful? Yes No
ScottDurow 1,039 on at

Like (0)

Report

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!

Was this reply helpful? Yes No
alvarezskinner 12 on at

Like (0)

Report

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

Was this reply helpful? Yes No
ScottDurow 1,039 on at

Like (0)

Report

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.

Was this reply helpful? Yes No
Ben Thompson 1,400 on at

Like (0)

Report

@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.

Was this reply helpful? Yes No
ScottDurow 1,039 on at

Like (0)

Report

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.

Was this reply helpful? Yes No
MichaelFP 1,847 Super User 2025 Season 2 on at

Like (0)

Report

Hi! I created a loader for use sass on PCF. Might you use the same process for the CSS files.

https://github.com/michaelfp/pcf-sass-loader

My load is combined with other modules, to be able to work. My loader does the main part, which is to create .css file on the project enabling the PCF build to copy .css file named in ControlManifest file. Unfortunately, I didn't find a way to not inform the CSS file in the manifest, because the file is read on the first part of the build process.

I hope this project helps you.

Was this reply helpful? Yes No