Power Platform Community Forum Thread Details

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.

Quick Links

Leaderboard > Power Apps - Power Apps Pro Dev & ISV