`node-sass` favoured over `sass` (dart-sass), leading to errors in monorepos

[Ant59]

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

No

Description

I encountered this problem when working on a monorepo with Yarn Workspaces. node-sass got hoisted from another project and Angular started using it. This wasn't ideal as I am using the new Sass module only available in dart-sass.

The bug is caused by first checking for node-sass. This problem can be fixed by instead checking for the sass package (as it's the newer alternative from the perspective of the CLI), then falling back to node-sass if sass isn't present.

https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts#L125-L131

🔬 Minimal Reproduction

Reproduced by having node-sass present in your node_modules.

🔥 Exception or Error

Errors related to having node-sass try to compile Sass 1.23.0 code.

🌍 Your Environment

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.0.0-next.6
Node: 10.16.3
OS: linux x64
Angular: 9.0.0-next.8
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.900.0-next.6
@angular-devkit/build-angular      0.900.0-next.6
@angular-devkit/build-ng-packagr   0.900.0-next.6
@angular-devkit/build-optimizer    0.900.0-next.6
@angular-devkit/build-webpack      0.900.0-next.6
@angular-devkit/core               9.0.0-next.6
@angular-devkit/schematics         9.0.0-next.6
@angular/cdk                       8.2.1
@angular/cli                       9.0.0-next.6
@angular/material                  8.2.1
@ngtools/webpack                   9.0.0-next.6
@schematics/angular                9.0.0-next.6
@schematics/update                 0.900.0-next.6
ng-packagr                         5.5.1
rxjs                               6.5.3
typescript                         3.5.3
webpack                            4.41.0

Anything else relevant?

[Ant59]

I think it would be best that node-sass is completely removed. This setup is prohibitive to anyone wanting to use the new Sass module system (@use) in a monorepo environment where node-sass might be present for other projects.

[clydin]

The underlying issue is one of the package manager itself. Package hoisting is problematic on its own but within a monorepo it can have devastating effects on the overall validity of the final output of the monorepo. For example, tests can pass during development that would fail at runtime. Packages can be available to projects during development that would not be available at runtime. Problems with individual packages within a monorepo can be worked around via package manager options such as nohoist (yarn in this case). However, to guarantee package and package version exactness, a package manager that provides those guarantees would need to be used such as pnpm or yarn pnp. The later of which is not yet (but will be) supported by the CLI.

[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.}