$theme variable is not defined in pre-built themes.

[davidshen84]

Bug, feature request, or proposal:

But

What is the expected behavior?

The $theme variable should be defined in the pre-built themes.

What is the current behavior?

After @import a pre-built theme, the $theme variable is not defined.

What are the steps to reproduce?

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

What is the use-case or motivation for changing an existing behavior?

Follow the guide on https://material.angular.io/guide/theming-your-components#how-to-use-code-mixin-code- to define my own theme.

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

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

Angular CLI: 6.0.8
Node: 8.11.3
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.8
@angular-devkit/core         0.6.8
@angular-devkit/schematics   0.6.8
@schematics/angular          0.6.8
@schematics/update           0.6.8
rxjs                         6.2.1
typescript                   2.7.2

Is there anything else we should know?

[crisbeto]

It looks like your import is pointing to a .css file which is compiled and doesn't have any of the variables.

[manklu]

Duplicate of #5152

[jelbourn]

Duplicate of #5152

The docs will be updated with v7

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