Skip to main content

Notifications

Power Apps - Power Apps Pro Dev & ISV
Answered

Subfolder for css resources

(0) ShareShare
ReportReport
Posted on by 3,072

Hi,

I'm experimenting with PCF controls. Great stuff! Smiley Happy

I've made a colorful autocomplete control with values from an optionset (just to try it out). You can see here what's about. https://dianabirkelbach.wordpress.com/2019/05/21/pcf-control-colorful-autocomplete-optionset/

I've tried to include font-awesome in my css subdirectory, by defining the resources in my manifest like that:

 <resources> 
 <code path="index.ts" order="1"/>
 <css path="css/BirDiaAutocomplete.css" order="1" /> 
  <css path="css/font-awesome.css" order="1" /> 
 <css path="css/fontawesome/fontawesome_webfont.eot" order="2" /> 
 <css path="css/fontawesome/fontawesome_webfont.svg" order="2" /> 
 <css path="css/fontawesome/fontawesome_webfont.ttf" order="2" /> 
 <css path="css/fontawesome/fontawesome_webfont.woff" order="2" /> 
 <css path="css/fontawesome/fontawesome_webfont.woff2" order="2" /> 
 </resources>

Inside the font-awesome.css, I have some links , referencing the resources in the subdirectory.

@font-face {
 font-family: 'FontAwesome';
 src: url("fontawesome/fontawesome_webfont.eot?");
 src: url("fontawesome/fontawesome_webfont.eot?#iefix") format("embedded-opentype"), url("fontawesome/fontawesome_webfont.woff2?") format("woff2"), url("fontawesome/fontawesome_webfont.woff?") format("woff"), url("fontawesome/fontawesome_webfont.ttf?") format("truetype"), url("fontawesome/fontawesome_webfont.svg?#fontawesomeregular") format("svg");
 font-weight: normal;
 font-style: normal; }

That didn't work!

But it did work when font-awesome.css was inside the same subdirectory as the referenced resources, having the links in the same folder (because it seems that the subfolder structure is flattened up, without any subfolder) 

@font-face {
 font-family: 'FontAwesome';
 src: url("fontawesome_webfont.eot?");
 src: url("fontawesome_webfont.eot?#iefix") format("embedded-opentype"), url("fontawesome_webfont.woff2?") format("woff2"), url("fontawesome_webfont.woff?") format("woff"), url("fontawesome_webfont.ttf?") format("truetype"), url("fontawesome_webfont.svg?#fontawesomeregular") format("svg");
 font-weight: normal;
 font-style: normal; }

I quess this will apply to images too.

 

My question is: 

Is it recommended/allowed to make subfolders when making the control? Do we have to be aware that the path of the resources doesn't have any subfolders? Or maybe there is a plan to change this behaviour?

 

Best regards,

Diana

 

 

 

  • Verified answer
    alchin Profile Picture
    alchin on at
    Re: Subfolder for css resources

    Hi Diana,

     

    Currently, the build tool will output all control resource files flattened into the output folder.  We are aware that this causes issues when these files are referenced via relative paths within other resource files.  To address this, we have planned a future update that will preserve the subfolder structure for control resources in the output folder.

     

    Thank you,

    Alex

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Microsoft Kickstarter Events…

Register for Microsoft Kickstarter Events…

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Announcing Forum Attachment Improvements!

We're excited to announce that attachments for replies in forums and improved…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 145,636

#2
RandyHayes Profile Picture

RandyHayes 76,287

#3
Pstork1 Profile Picture

Pstork1 64,942

Leaderboard