"ng build --watch" breaks when any scss file in /assets folder, contains //

[pamtbaau]

• new
• [x ] build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 11

Description

When folder /assets contains a .scss file which contains // comments, ng build --watch will fail.

assets/style.scss - Error: assets/style.scss from Css Minimizer
C:\path\to\project\assets\style.scss:1:1: Unknown word

When file is moved to any other folder, no issue is thrown.

See also: #20853 and #20812

🔬 Minimal Reproduction

• $ ng new
  • Choose 'scss`
• Run $ ng build --watch
  • Compiler builds successfully
• Update 'angular.json' with "styles": [ "src/assets/style.scss"]
  • Add style.scss file to /assets
  • Compiler rebuilds successfully
• Add // comment to /assets/style.scss
  • Compiler fails:

  assets/style.scss - Error: assets/style.scss from Css Minimizer
  C:\path\to\project\assets\style.scss:1:1: Unknown word
  When file is moved to any other folder, no issue is thrown.

🔥 Exception or Error

assets/style.scss - Error: assets/style.scss from Css Minimizer
C:\path\to\project\assets\style.scss:1:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser [assets/style.scss:1,1]
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
    at Input.error (C:\path\to\project\node_modules\postcss\lib\input.js:123:16)
    at Parser.unknownWord (C:\path\to\project\node_modules\postcss\lib\parser.js:518:22)
etc....

🌍 Your Environment

Angular CLI: 12.0.1
Node: 14.15.1
Package Manager: npm 6.14.8
OS: win32 x64

Angular: 12.0.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.1
@angular-devkit/build-angular   12.0.1
@angular-devkit/core            12.0.1
@angular-devkit/schematics      12.0.1
@schematics/angular             12.0.1
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?

[alan-agius4]

@pamtbaau, in this case there is no real reason why this should be supported.

Having a SCSS file in assets and have the build configured to copy it without being compiled into CSS in the dist folder is unlikely to be desired. This also will cause an un-unnecessary increasing memory during the build.

Therefore in this case, if you are placing SCSS files in the assets folder, you should exclude these from being copied.

[pamtbaau]

My bad. To simplify the reproducible steps, I have left out my styles config. The error is also thrown when scss does get compiled.
I have updated the reproducible steps above.

In my project I use "styles": ["src/assets/scss/style.scss"] to compile the scss file below /assets.

This worked fine for a long time, until upgrading to v12.
Also, it is remarkable that the build only fails in --watch mode.

The other closed issues I referred to, contain a similar setup, with .scss file inside /assets and using // comments.

[alan-agius4]

The above will still cause the styles.scss to be copied apart from it being compiled.

This is because all the contents of the assets directory are copied by default.

Therefore, you need to amend the assets pattern to ignore such files.

assets": [
   { "glob": "**/*", "input": "src/assets", "ignore": ["**/*.scss"], "output": "/assets" }
]

My recommendation would be to dedicate the assets to static assets.

[pamtbaau]

I understand the /assets folder isn't the right place. The setup is a leftover from the times I used an external webpack config. When I moved to the internal webpack, it still worked... Didn't notice the side-effect.

I'll move the styles to /styles to create a cleaner setup.

Nontheless:

• Just downgraded to v11, repeated setup steps and all works fine using ng build --watch.
  • Which means there is a breaking change somewhere, when moving to v12, that others and I are stumbling over.
• Why does ng build --watch fail and ng build does not?
• Why would the build process suddenly stumble over '//' comments?

If above questions are too much asked, you may close the issue. I'm happy with the solution.

[alan-agius4]

I understand the /assets folder isn't the right place. The setup is a leftover from the times I used an external webpack config. When I moved to the internal webpack, it still worked... Didn't notice the side-effect.

I'll move the styles to /styles to create a cleaner setup.

Nontheless:

• Just downgraded to v11, repeated setup steps and all works fine using ng build --watch.

  • Which means there is a breaking change somewhere, when moving to v12, that others and I are stumbling over.

Indeed this is cause an error which can be consider breaking, but it’s also highlighting a misconfiguration which leads to an undesired increase in memory usage and slower build times.

• Why does ng build --watch fail and ng build does not?

In watch mode, “assets” are managed by Webpack, during non watch mode these are managed in the browser builder.

• Why would the build process suddenly stumble over '//' comments?

In version 12, most of the webpack build pipeline has changed due to the update to Webpack 5.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}