angularazurewebpacksassconfiguration

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
        ╵          ^

EDIT: including the simplest file that is failing, the SASS looks like:

* {
    text-align: center;
}

h1 {
    margin-top: 40vh;
}

img {
    position: absolute;
    top: calc(100vh - 60px);
    right: 0;
}

which doesn't have any syntax errors. The same goes for the others.

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. It looks like the build command is adding something to the files and then failing. EDIT: I followed this setup guide for SASS and Angular - https://www.geeksforgeeks.org/how-do-you-create-application-to-use-scss/

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

"compilerOptions": {
  ...
  "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

Solution

  • The path to the file was incorrect

    ... /angular_test/src/app/src ...

    Got rid of the extra '/app/src' and it worked as expected.