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

[vokeit-gschuster]

• [ ] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] I checked to make sure that this issue has not already been filed
• [x] 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
            }
          }

[jdpearce]

Thanks for raising this @vokeit-gschuster, I've just tried with the latest 8.3.3 release and can't replicate this issue. Can you retry?

[vokeit-gschuster]

I'll see if I can test tomorrow but I'm pretty sure it won't work - the deps in 8.8.3 still state sass-loader 7.x.
The problem arises when using sass-loader 8.x, which is the current stable that nx should use in my opinion.

[vsavkin]

@vokeit-gschuster I think it makes sense to use the latest stable. Would you like to submit a PR to bump up the version and write a migration with it? We can help.

[roedit]

This issue still happens in v9.0.0:
File identified as (one) problem location:
nx/packages/web/src/utils/third-party/cli-files/models/webpack-configs/styles.ts#L141-L158

  const baseRules: webpack.RuleSetRule[] = [
    { test: /\.css$/, use: [] },
    {
      test: /\.scss$|\.sass$/,
      use: [
        {
          loader: 'sass-loader',
          options: {
            implementation: sassImplementation,
            fiber,
            sourceMap: cssSourceMap,
            // bootstrap-sass requires a minimum precision of 8
            precision: 8,
            includePaths
          }
        }
      ]
    }

These properties are valid: object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

[kremerd]

Pretty sure @roedit found the culprit here. In fact I got my project to build again locally by updating that options parameter.

Should I raise a PR for this?

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

[jaysoo]

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