Angular CLI 6.0.0 support for stylePreprocessorOptions

Versions

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

Angular CLI: 6.0.0-rc.6
Node: 8.9.1
OS: darwin x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.8
@angular-devkit/build-angular     0.5.8
@angular-devkit/build-optimizer   0.5.8
@angular-devkit/core              0.5.8
@angular-devkit/schematics        0.5.8
@angular/cdk                      5.2.4
@angular/cli                      6.0.0-rc.6
@angular/flex-layout              5.0.0-beta.14
@angular/material                 5.2.4
@ngtools/json-schema              1.1.0
@ngtools/webpack                  6.0.0-rc.6
@schematics/angular               0.5.8
@schematics/update                0.5.8
rxjs                              5.5.10
typescript                        2.6.2
webpack                           4.6.0

Repro steps

• Clone this.
• Old .angular_cli.json

...
      "scripts": [
        ....
      ],
      "stylePreprocessorOptions": { <---- !!!!!!
        "includePaths": [
          "../src/styles/"
        ]
      },
      "environmentSource": "environments/environment.ts",
...

• Update CLI to 6.0.0-rc.6. Run ng update and then ng update @angular/cli --migrate-only --from=1
• Run npm start

Observed behavior

ERROR in Module build failed: 
@import "mixins";
^
      File to import not found or unreadable: mixins.

Desired behavior

Support for stylePreprocessorOptions or fix ng update because it removes that part from angular.json file.

[lehoffma]

stylePreprocessorOptions is still supported. You will have to manually update the newly generated angular.json though. Its new place is inside the “options” block of the json. An example config could look like this:

"options": {
	"outputPath": "../webapp",
	"index": "src/index.html",
	"main": "src/main.ts",
	"tsConfig": "src/tsconfig.app.json",
	"polyfills": "src/polyfills.ts",
	"assets": [
		{
			"glob": "**/*",
			"input": "src/resources",
			"output": "/resources"
		},
	],
	"styles": [
		"src/styles.scss"
	],
	"stylePreprocessorOptions": {
		"includePaths": [
			"src/styles"
		]
	},
	"scripts": []
}

Note the changed path.

I agree that it would be nice if ng update did this automatically.

[hudsontavares]

One thing I found by myself and that can prevent a lot of headache:

For tests running, you must include the same stylePreprocessorOptions from projects.yourProjectName.architect.build.options into projects.YourProjectName.test.options, otherwise the same error will appear.

I was wondering whether it is a bug or the expected behaviour there.