@nrwl/web: Failes to compile due to invalid SASS options

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I’m reporting the issue to the correct repository (not related to Angular, AngularCLI or any dependency)

Expected Behavior

The test app should serve / build.

Current Behavior

Serving fails due to an invalid builder config as the config format for sass-loader changed in 8.0.0

Failure Information (for bugs)

ERROR in ./styles.scss (.../node_modules/@nrwl/web/src/utils/build-angular/angular-cli-files/plugins/raw-css-loader.js!.../node_modules/postcss-loader/src??embedded!.../node_modules/sass-loader/dist/cjs.js??ref--10-3!./styles.scss)
Module build failed (from .../node_modules/sass-loader/dist/cjs.js)
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'includePaths'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (...\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:50:11)
    at Object.loader (...\node_modules\sass-loader\dist\index.js:36:28

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. Create an NX workspace with an angular app
2. Migrate to the latest versions including betas
3. Add a “web” app: ng g @nrwl/web:application tstapp
4. Try to serve it: ng serve tstapp

Context

  @nrwl/angular : 8.8.2-beta.2
  @nrwl/cli : 8.8.2-beta.2
  @nrwl/cypress : 8.8.2-beta.2
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 8.8.2-beta.2
  @nrwl/linter : 8.8.2-beta.2
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 8.8.2-beta.2
  @nrwl/web : 8.8.2-beta.2
  @nrwl/workspace : 8.8.2-beta.2
  typescript : 3.6.4

File identified as (one) problem location:

nrwl/nx/packages/web/src/utils/build-angular/angular-cli-files/models/webpack-configs/styles.ts https://github.com/nrwl/nx/blob/791c3f25fc7e54a6d50f5eaca874fcb41dd166f5/packages/web/src/utils/build-angular/angular-cli-files/models/webpack-configs/styles.ts#L148-L155

When changing to the following structure it serves fine:

          options: {
            implementation: sassImplementation,
            sourceMap: cssSourceMap,
            sassOptions: {
              fiber,
              // bootstrap-sass requires a minimum precision of 8
              precision: 8,
              includePaths
            }
          }

[jaysoo]

@brianmcd Thanks, we will get that package updated in the next version.

[brianmcd]

In case this helps anyone:

I have an Angular-powered workspace building a React app, and after upgrading Nx (and therefore the Angular CLI), I was getting the error mentioned here.

I think the issue is that @angular-devkit/build-angular upgraded to sass-loader 8 here: https://github.com/angular/angular-cli/commit/2c8b12f45c6f3cd779e860c809db03059b5754b5. My node_modules folder has sass-loader 8 installed to node_modules/sass-loader. Nx is pulling in sass-loader 7.2.0 to node_modules/@nrwl/web/node_modules/sass-loader. The webpack config just uses loader: 'sass-loader' here, which I think is causing it to use sass-loader 8 instead of 7.

yarn why sass-loader was saying the the sass-loader from @nrwl/web was the one that was supposed to be hoisted, but the sass-loader from @angular-devkit/build-angular is the one that was actually hoisted. Removing then re-installing the node_modules folder fixed it because yarn started hoisting sass-loader from @nrwl/web instead. Now I have sass-loader @ 7.2.0 in node_modules/sass-loader and all is good.

It would still be great to see Nx update to sass-loader 8 and update the config.