You’re offline. This is a read only version of the page.
18
I don´t think that is not ideal. Because this is the way that wabpack (that build the bundles) works. I tested updating PCF version and nothing changed. Unfortunately, until Microsoft releases a webpackconfig extension to put on the PCF outside the node_modules we need to do this way.
That is cool thanks! That would still require a modifying of the pcf-script dependency which is not ideal, but i believe there is no straightforward workaround for this at this point.
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.
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.
@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.
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.
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:
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!
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?
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 ;
Share
Report
All responses (
Answers (
.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
#1
WarrenBelz
109
Most Valuable Professional
#2
Michael E. Gernaey
82
Super User 2025 Season 1
#3
MS.Ragavendar
72
