Components: Failed to compile when using custom theme

[bagolysz]

Bug, feature request, or proposal:

Bug.

What is the expected behavior?

Successful compilation using custom material theme.

What is the current behavior?

Syntax error detected when compiling:

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/@angular/material/_theming.scss
Module build failed: Syntax Error

(56:49) Missed semicolon

  54 |
  55 |   .cdk-overlay-backdrop {
> 56 |     // TODO(jelbourn): reuse sidenav fullscreen mixin.
     |                                                 ^
  57 |     position: absolute;
  58 |     top: 0;

 @ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/custom-theme.scss 3:10-185
 @ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css
 @ ./src/styles.css
 @ multi ./src/styles.css ./src/custom-theme.scss

What are the steps to reproduce?

1. Define a custom theme: custom-theme.scss with the following content:

@import '~@angular/material/_theming.scss';
@include mat-core();

$custom-theme-primary: mat-palette($mat-blue-grey);
$custom-theme-accent: mat-palette($mat-teal, A200, A100, A400);
$custom-theme-warn: mat-palette($mat-orange);

$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);

@include angular-material-theme($custom-theme);

1. Add to styles.css:
   @import "./custom-theme.scss";

2. Change in .angular-cli.json to:

"styles": [
        "styles.css",
        "custom-theme.scss"
      ]

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5.1.3
Angular Material 5.0.3

Angular CLI: 1.6.2
Node: 8.9.3
OS: win32 x64
Angular: 5.1.3

@angular/cdk: 5.0.3
@angular/cli: 1.6.2
@angular/material: 5.0.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.2
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

[devversion]

You are importing a SCSS file inside of a CSS file (_styles.css_).

This is not working, because CSS doesn't understand the SCSS syntax. Please just load the custom-theme.scss file by adding it to the styles: [] array in the .angular-cli.json file (basically as you did)

[angular-automatic-lock-bot[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._}