I am trying to integrate scene-composer into angular application but facing CSS loading issues. How to solve it?

[miantalha48]

I am trying to integrate @iot-app-kit/scene-composer SceneView into angular application.

I installed @iot-app-kit/scene-composer, @iot-app-kit/source-iottwinmaker into Angular 16.

Loading SceneView React component but when run the start serve command getting CSS issue.

./node_modules/@iot-app-kit/scene-composer/dist/src/components/panels/SceneHierarchyPanel/components/SubModelTree/SubModelTree.scss?ngGlobalStyle:1:0 - Error: Module parse failed: Unexpected token (1:0) File was processed with these loaders:

• ./node_modules/resolve-url-loader/index.js
• ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders.

  .tm-hierarchy-panel #tm-main .tm-tree .tm-tree-item.tm-sub-model { | background-color: #414750; | }

./node_modules/@iot-app-kit/scene-composer/dist/src/components/panels/SceneHierarchyPanel/layout/layout.scss?ngGlobalStyle:1:0 - Error: Module parse failed: Unexpected token (1:0) File was processed with these loaders:

• ./node_modules/resolve-url-loader/index.js
• ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders.

  .tm-hierarchy-panel .tm-toolbar { | padding: 15px; | }

./node_modules/@iot-app-kit/scene-composer/dist/src/components/panels/scene-components/CameraComponentEditor.scss?ngGlobalStyle:1:0 - Error: Module parse failed: Unexpected token (1:0) File was processed with these loaders:

• ./node_modules/resolve-url-loader/index.js
• ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders.

  .tm-camera-sub-form-label { | padding: 10px 0px 0px 0px; | }

./node_modules/@iot-app-kit/scene-composer/dist/src/components/panels/scene-components/common/ValueDataBindingBuilder.scss?ngGlobalStyle:1:0 - Error: Module parse failed: Unexpected token (1:0) File was processed with these loaders:

• ./node_modules/resolve-url-loader/index.js
• ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders.

  .tm-copy-select-flex { | display: flex; | flex-wrap: nowrap;

./node_modules/@iot-app-kit/scene-composer/dist/src/components/panels/scene-components/motion-indicator/PreviewArrow.scss?ngGlobalStyle:1:0 - Error: Module parse failed: Unexpected token (1:0) File was processed with these loaders:

• ./node_modules/resolve-url-loader/index.js
• ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders.

  .tm-preview-arrow { | border: 1px solid rgb(135, 149, 150); | }

./node_modules/@iot-app-kit/scene-composer/dist/src/components/panels/scene-components/tag-style/IconPicker/IconPickerUtils/IconPicker-aws-overrides.scss?ngGlobalStyle:1:0 - Error: Module parse failed: Unexpected token (1:0) File was processed with these loaders:

• ./node_modules/resolve-url-loader/index.js
• ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders.

  .tm-icon-picker-button { | border-radius: 10px !important; | position: "absolute";

./node_modules/@iot-app-kit/scene-composer/dist/src/enhancers/draggable.scss?ngGlobalStyle:1:0 - Error: Module parse failed: Unexpected token (1:0) File was processed with these loaders:

• ./node_modules/resolve-url-loader/index.js
• ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders.

  .tm-draggable[draggable=true] { | cursor: grab; | }

./node_modules/@iot-app-kit/scene-composer/dist/src/layouts/SceneLayout/components/CameraPreviewTrack.scss?ngGlobalStyle:1:0 - Error: Module parse failed: Unexpected token (1:0) File was processed with these loaders:

• ./node_modules/resolve-url-loader/index.js
• ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders.

  .tm-display-title { | position: relative; | width: calc(100% - 10px);

./node_modules/@iot-app-kit/scene-composer/dist/src/layouts/SceneLayout/components/FoldableContainer.scss?ngGlobalStyle:1:0 - Error: Module parse failed: Unexpected token (1:0) File was processed with these loaders:

• ./node_modules/resolve-url-loader/index.js
• ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders.

  .tm-wrapper-left, | .tm-wrapper-right { | display: flex;

./node_modules/@iot-app-kit/scene-composer/dist/src/layouts/SceneLayout/components/ScenePanel.scss?ngGlobalStyle:1:0 - Error: Module parse failed: Unexpected token (1:0) File was processed with these loaders:

• ./node_modules/resolve-url-loader/index.js
• ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js You may need an additional loader to handle the result of these loaders.

  .tm-collapse-panel { | height: 100%; | overflow-y: auto;

./node_modules/video.js/dist/video-js.css?ngGlobalStyle:1:0 - Error: 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

.vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before { | position: absolute; | top: 0;

Error: Can't resolve 'node_modules/@iot-app-kit/scene-composer/dist/src/components/panels/ColorPicker/ColorPicker.scss' in 'E:\Projects\Test_projects\twinmaker_demo'

Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/

× Failed to compile.

[diehbria]

Thank you for reaching out, I've reached out to the subject matter experts in scene-viewer and twinmaker data source to provide some help.

[mitchlee-amzn]

Hey, we have a backlog item for this, but the issue running into today is because the @iot-app-kit/scene-composer package doesn't transpile scss/styled components into CSS that gets vended out in our dist bundle. In the future, we're going to change this so it's just native CSS that's vended out in our dist, but I don't have a good ETA for you when we're going to make that change.

In the meantime, you can likely work around this by updating your bundler config to support SASS. Based on your errors, it looks like you are probably using Webpack as your bundler, here's a link that explains how to configure SASS support in webpack: https://webpack.js.org/loaders/sass-loader/