cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
moizmh
Level: Power Up

Resolving node_modules CSS dependencies in PowerApps Custom Control

I am trying to build a power apps custom control using ckeditor v5. First step I did was to include

"@ckeditor/ckeditor5-build-classic": "^12.3.1",
 using npm and resolve in my controls base file using  
const ClassicEditor = require('@ckeditor/ckeditor5-build-classic');
 
The above settings work and my control renders fine. I although have one other depdency to include fonts package. For this we have to seperately install 
"@ckeditor/ckeditor5-font": "^11.2.1"
and reference in index.ts -
const Font = require('@ckeditor/ckeditor5-font/src/font');
 
When compiling the package, it throws CSS exceptions 
ERROR in ./node_modules/@ckeditor/ckeditor5-ui/theme/components/list/list.css 6:0
Module parse failed: Unexpected character '@' (6:0)
You may need an appropriate loader to handle this file type.
| */
|
> @import "../../mixins/_unselectable.css";
|
| .ck.ck-list {
@ ./node_modules/@ckeditor/ckeditor5-ui/src/list/listview.js 13:0-46
@ ./node_modules/@ckeditor/ckeditor5-ui/src/dropdown/utils.js
@ ./node_modules/@ckeditor/ckeditor5-font/src/fontsize/fontsizeui.js
@ ./node_modules/@ckeditor/ckeditor5-font/src/fontsize.js
@ ./node_modules/@ckeditor/ckeditor5-font/src/font.js
@ ./HtmlEditorControl/index.ts
 
Appreciate all the help. Thanks.
1 ACCEPTED SOLUTION

Accepted Solutions
jaguil3ra
Level: Powered On

Re: Resolving node_modules CSS dependencies in PowerApps Custom Control

The PCF in this moment doesn't compile the files ".css", you need remove all lines where use @import with ".css" and then add these in the manifest. Example:

<css path="../node_modules/ckeditor/mixins/_unselectable.css" order="1" />




View solution in original post

3 REPLIES 3
jaguil3ra
Level: Powered On

Re: Resolving node_modules CSS dependencies in PowerApps Custom Control

The PCF in this moment doesn't compile the files ".css", you need remove all lines where use @import with ".css" and then add these in the manifest. Example:

<css path="../node_modules/ckeditor/mixins/_unselectable.css" order="1" />




View solution in original post

moizmh
Level: Power Up

Re: Resolving node_modules CSS dependencies in PowerApps Custom Control

Thanks, I thought so when i checked your implementatio of rich text editor using Quill.

jaguil3ra
Level: Powered On

Re: Resolving node_modules CSS dependencies in PowerApps Custom Control

Nice!! Smiley Happy


@moizmh wrote:

Thanks, I thought so when i checked your implementatio of rich text editor using Quill.




 

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors (Last 30 Days)
Users online (4,546)