SCSS: Failed to load

[dschu-lab]

1. OS?

   Ubuntu 16.04

2. Versions. Please run ng --version.

   angular-cli: 1.0.0-beta.10
   node: 6.5.0
   os: linux x64

3. Repro steps.
   ng new sassy-project --style=scss

4. The log given by the failure.
   XCEPTION: Failed to load http://localhost:4200/app/app.component.scssBrowserDomAdapter.logError @ browser_adapter.ts:82BrowserDomAdapter.logGroup @ browser_adapter.ts:93ExceptionHandler.call @ exception_handler.ts:58(anonymous function) @ application_ref.ts:413ZoneDelegate.invoke @ zone.js:323onInvoke @ ng_zone_impl.ts:72ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:61ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426

5. Mention any other details that might be useful.

To use scss/sass the documentation mentions to use styleUrls: ['app.component.scss'], but when using the scss file extention, the error above is thrown. When using the css extension, everything works fine, but my IDE (WebStorm) won't let me open the sass file with CTRL + CLICK, like it would when writing the correct extension.

Either you should mention in the documentation, that you still have to write the compiled file in the styleUrls array, or some sort of magic needs to be implemented.

P.S.: When creating a project from scratch using the command mentioned at 3, the app.component.scss file is created, but inside the .ts file styleUrls says css

[monojack]

The documentation is for the webpack version of the cli.
Looks like you are still using the system.js version which, indeed, needs to use a .css extension

[chosroes]

I have a similar issue (With newly installed angular-cli@webpack) :

ng set defaults.styleExt scss

Could not start watchman; falling back to NodeWatcher for file system events. Visit http://ember-cli.com/user-guide/#watchman for more info. Cannot read property 'serialize' of undefined TypeError: Cannot read property 'serialize' of undefined at /var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/schema-tree.ts:235:87 at JsonSerializer.property (/var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/serializer.ts:100:9) at _loop_1 (/var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/schema-tree.ts:235:32) at /var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/schema-tree.ts:240:17 at JsonSerializer.object (/var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/serializer.ts:88:9) at ObjectSchemaTreeNode.serialize (/var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/schema-tree.ts:227:20) at /var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/schema-tree.ts:231:92 at JsonSerializer.property (/var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/serializer.ts:100:9) at _loop_1 (/var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/schema-tree.ts:231:36) at /var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/schema-tree.ts:240:17 at JsonSerializer.object (/var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/serializer.ts:88:9) at ObjectSchemaTreeNode.serialize (/var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/schema-tree.ts:227:20) at /var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/schema-tree.ts:293:33 at JsonSerializer.array (/var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/serializer.ts:107:9) at ArraySchemaTreeNode.serialize (/var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/schema-tree.ts:291:20) at /var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/schema-tree.ts:231:92 at JsonSerializer.property (/var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/serializer.ts:100:9) at _loop_1 (/var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/schema-tree.ts:231:36) at /var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/schema-tree.ts:240:17 at JsonSerializer.object (/var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/serializer.ts:88:9) at RootSchemaTreeNode.ObjectSchemaTreeNode.serialize (/var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/schema-tree.ts:227:20) at GeneratedSchemaClass.SchemaClassBase.$$serialize (/var/www/project/node_modules/angular-cli/addon/ng2/models/json-schema/schema-class-factory.ts:141:25)

[borntodesign]

@chosroes I have the same issue. #1900

[filipesilva]

Dupe of #1900

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