Deploying Angular App on Azure SWA with SCSS Issues

I am using an Angular app out of the box with the CLI generation. Currently trying to deploy to an Azure Static Web App resource and am getting build errors. I get the following error for each of my SCSS files:

Warning: ▲ [WARNING] Unexpected "(" [css-syntax-error]

C:/Users/myPC/source/repos/angular_test/src/app/src/styles/app.component.scss:1:9:

1 │ /******/ (() => { // webpackBootstrap
╵ ^​

I don't have anything named webpack or bootstrap or any combination like that set up for the project and I can't seem to find anything about SCSS files failing like this.


I previously made a fix for a package I am using called 'amCharts5' and to get it working had to fix this error:

node_modules/xml2js/lib/parser.js:36:25:
36 │ setImmediate = require('timers').setImmediate;
╵ ~~~~~~~~​

by changing the following lines in angular.json...

"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/easy-bgg",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": [
"zone.js"
],​

(changing from "builder": "@angular-devkit/build-angular:application")

(changing from "browser": "src/main.ts")

...and adding the following lines to tsconfig.json

"paths": {
"timers": ["./node_modules/timers-browserify"],
"stream": ["./node_modules/stream-browserify"]
}​

I don't have any experience with changing build and settings files so I'm pretty sure that fix messed everything up, but I have no clue. Any help would be appreciated

Continue reading...