Replace default template's CSS with SASS if new angular project is setup with SASS

### Current Behavior

When adding an angular app to the workspace using SASS as stylesheet format, serving the default app will fail.

### Expected Behavior

This is an easy fix: 
Replace the template's css part with sass and it compiles again:

```
html
  -webkit-text-size-adjust: 100%
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
  line-height: 1.5
  tab-size: 4
  scroll-behavior: smooth

body
  font-family: inherit
  line-height: inherit
  margin: 0

h1, h2, p, pre
  margin: 0

*, ::before, ::after
  box-sizing: border-box
  border-width: 0
  border-style: solid
  border-color: currentColor

h1, h2
  font-size: inherit
  font-weight: inherit

a
  color: inherit
  text-decoration: inherit

pre
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace

svg
  display: block
  vertical-align: middle
  shape-rendering: auto
  text-rendering: optimizeLegibility

pre
  background-color: rgba(55, 65, 81, 1)
  border-radius: 0.25rem
  color: rgba(229, 231, 235, 1)
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace
  overflow: auto
  padding: 0.5rem 0.75rem

.shadow
  box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)

.rounded
  border-radius: 1.5rem

.wrapper
  width: 100%

.container
  margin-left: auto
  margin-right: auto
  max-width: 768px
  padding-bottom: 3rem
  padding-left: 1rem
  padding-right: 1rem
  color: rgba(55, 65, 81, 1)
  width: 100%

#welcome
  margin-top: 2.5rem

  h1
    font-size: 3rem
    font-weight: 500
    letter-spacing: -0.025em
    line-height: 1

  span
    display: block
    font-size: 1.875rem
    font-weight: 300
    line-height: 2.25rem
    margin-bottom: 0.5rem

#hero
  align-items: center
  background-color: hsla(214, 62%, 21%, 1)
  border: none
  box-sizing: border-box
  color: rgba(55, 65, 81, 1)
  display: grid
  grid-template-columns: 1fr
  margin-top: 3.5rem

  .text-container
    color: rgba(255, 255, 255, 1)
    padding: 3rem 2rem

    h2
      font-size: 1.5rem
      line-height: 2rem
      position: relative

      svg
        color: hsla(162, 47%, 50%, 1)
        height: 2rem
        left: -0.25rem
        position: absolute
        top: 0
        width: 2rem

      span
        margin-left: 2.5rem

    a
      background-color: rgba(255, 255, 255, 1)
      border-radius: 0.75rem
      color: rgba(55, 65, 81, 1)
      display: inline-block
      margin-top: 1.5rem
      padding: 1rem 2rem
      text-decoration: inherit

  .logo-container
    display: none
    justify-content: center
    padding-left: 2rem
    padding-right: 2rem

    svg
      color: rgba(255, 255, 255, 1)
      width: 66.666667%

#middle-content
  align-items: flex-start
  display: grid
  grid-template-columns: 1fr
  margin-top: 3.5rem

  #middle-left-content
    display: flex
    flex-direction: column
    gap: 2rem

#learning-materials
  padding: 2.5rem 2rem

  h2
    font-weight: 500
    font-size: 1.25rem
    letter-spacing: -0.025em
    line-height: 1.75rem
    padding-left: 1rem
    padding-right: 1rem

.list-item-link
  align-items: center
  border-radius: 0.75rem
  display: flex
  margin-top: 1rem
  padding: 1rem
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
  transition-duration: 150ms
  width: 100%

  svg
    &:first-child
      margin-right: 1rem
      height: 1.5rem
      transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
      transition-duration: 150ms
      width: 1.5rem

    &:last-child
      height: 1rem
      transition-property: all
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
      transition-duration: 150ms
      width: 1rem

  > span
    flex-grow: 1
    font-weight: 400
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)

    > span
      color: rgba(107, 114, 128, 1)
      display: block
      flex-grow: 1
      font-size: 0.75rem
      font-weight: 300
      line-height: 1rem
      transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)

  &:hover
    color: rgba(255, 255, 255, 1)
    background-color: hsla(162, 55%, 33%, 1)

    > span > span
      color: rgba(243, 244, 246, 1)

    svg:last-child
      transform: translateX(0.25rem)

.button-pill
  padding: 1.5rem 2rem
  margin-bottom: 2rem
  transition-duration: 300ms
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
  align-items: center
  display: flex

  svg
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
    transition-duration: 150ms
    flex-shrink: 0
    width: 3rem

  > span
    letter-spacing: -0.025em
    font-weight: 400
    font-size: 1.125rem
    line-height: 1.75rem
    padding-left: 1rem
    padding-right: 1rem

  span span
    display: block
    font-size: 0.875rem
    font-weight: 300
    line-height: 1.25rem

  &:hover
    svg
      color: rgba(255, 255, 255, 1) !important

    color: rgba(255, 255, 255, 1) !important

.nx-console
  &:hover
    background-color: rgba(0, 122, 204, 1)

  svg
    color: rgba(0, 122, 204, 1)

.nx-console-jetbrains
  margin-top: 2rem

  &:hover
    background-color: rgba(255, 49, 140, 1)

  svg
    color: rgba(255, 49, 140, 1)

#nx-repo
  &:hover
    background-color: rgba(24, 23, 23, 1)

  svg
    color: rgba(24, 23, 23, 1)

#nx-cloud
  margin-bottom: 2rem
  margin-top: 2rem
  padding: 2.5rem 2rem

  > div
    align-items: center
    display: flex

    svg
      border-radius: 0.375rem
      flex-shrink: 0
      width: 3rem

    h2
      font-size: 1.125rem
      font-weight: 400
      letter-spacing: -0.025em
      line-height: 1.75rem
      padding-left: 1rem
      padding-right: 1rem

      span
        display: block
        font-size: 0.875rem
        font-weight: 300
        line-height: 1.25rem

  p
    font-size: 1rem
    line-height: 1.5rem
    margin-top: 1rem

  pre
    margin-top: 1rem

  a
    border-radius: 0.75rem
    color: white
    background-color: hsla(214, 62%, 21%, 1)
    display: inline-block
    margin-top: 1.5rem
    padding: 0.5rem 1rem
    text-align: left
    text-decoration: inherit

#commands
  padding: 2.5rem 2rem
  margin-top: 3.5rem

  h2
    font-size: 1.25rem
    font-weight: 400
    letter-spacing: -0.025em
    line-height: 1.75rem
    padding-left: 1rem
    padding-right: 1rem

  p
    font-size: 1rem
    font-weight: 300
    line-height: 1.5rem
    margin-top: 1rem
    padding-left: 1rem
    padding-right: 1rem

details
  align-items: center
  display: flex
  margin-top: 1rem
  padding-left: 1rem
  padding-right: 1rem
  width: 100%

  pre > span
    color: rgba(181, 181, 181, 1)

summary
  border-radius: 0.5rem
  display: flex
  font-weight: 400
  padding: 0.5rem
  cursor: pointer
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
  transition-duration: 150ms

  &:hover
    background-color: rgba(243, 244, 246, 1)

  svg
    height: 1.5rem
    margin-right: 1rem
    width: 1.5rem

#love
  color: rgba(107, 114, 128, 1)
  font-size: 0.875rem
  line-height: 1.25rem
  margin-top: 3.5rem
  opacity: 0.6
  text-align: center

  svg
    color: rgba(252, 165, 165, 1)
    width: 1.25rem
    height: 1.25rem
    display: inline
    margin-top: -0.25rem

@media screen and (min-width: 768px)
  #hero
    grid-template-columns: repeat(2, minmax(0, 1fr))

    .logo-container
      display: flex

  #middle-content
    grid-template-columns: repeat(2, minmax(0, 1fr))
    gap: 4rem
```

### GitHub Repo

_No response_

### Steps to Reproduce

After running `nx generate @nx/angular:application apps/web` on a new project and setting **sass** as the stylesheet format, when trying to serve this default app via `npx nx serve web`, I get 
```
Application bundle generation failed. [0.809 seconds] - 2025-11-14T11:31:53.556Z

✘ [ERROR] Expected newline.
  ╷
2 │       html {
  │            ^
  ╵
  apps/web/src/app/nx-welcome.ts
```

### Nx Report

```shell
N/A
```

### Failure Logs

```shell

```

### Package Manager Version

_No response_

### Operating System

- [x] macOS
- [ ] Linux
- [ ] Windows
- [ ] Other (Please specify)

### Additional Information

_No response_

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Replace default template's CSS with SASS if new angular project is setup with SASS #33489

Current Behavior

Expected Behavior

GitHub Repo

Steps to Reproduce

Nx Report

Failure Logs

Package Manager Version

Operating System

Additional Information

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Uh oh!

Replace default template's CSS with SASS if new angular project is setup with SASS #33489

Description

Current Behavior

Expected Behavior

GitHub Repo

Steps to Reproduce

Nx Report

Failure Logs

Package Manager Version

Operating System

Additional Information

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions