Components: Cannot create theme. "Mixins may not be defined within control directives or other mixins."

[Nathan-Ryan]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The .scss file compiles.

What is the current behavior?

Scss complier (I'm using VS2017 and Web Compiler) throws an error "Mixins may not be defined within control directives or other mixins.".

What are the steps to reproduce?

Importing the theming file from material seems to cause the error.
@import "../node_modules/@angular/material/theming";

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

Migration from 2.0.0-beta.6 to 2.0.0-beta.7

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

Angular: 4.2.2
Material: 2.0.0-beta.7
OS: Windows 10
TypeScript: 2.3.4

[Nathan-Ryan]

Found the culprit. The @mixin mat-input-placeholder-floating is nested within the @mixin mat-input-typography.

[Faltek]

Have the same issue.

[Alyaeri]

Also experiencing this issue with all my .scss files

[kekel87]

I have the same problem.
I solved this by updating gulp-saas 2.3.2 to 3.1.0

[jelbourn]

@crisbeto we should probably separate the definitions anyway

[neogenz]

@kekel87

With gulp-sass 3.1.0, i have this error :

```Message:
node_modules/@angular/material/_theming.scss
Error: (50: #fbe9e7, 100: #ffccbc, 200: #ffab91, 300: #ff8a65, 400: #ff7043, 500: #ff5722, 600: #f4511e, 700: #e64a19, 800: #d84315, 900: #bf360c, A100: #ff9e80, A200: #ff6e40, A400: #ff3d00, A700: #dd2c00, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: rgba(0, 0, 0, 0.87), 400: rgba(0, 0, 0, 0.87), 500: white, 600: white, 700: white, 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: rgba(0, 0, 0, 0.87), A400: white, A700: white), default: #ff5722, lighter: #ffccbc, darker: #e64a19, default-contrast: white, lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: white, "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": rgba(0, 0, 0, 0.87), "400-contrast": rgba(0, 0, 0, 0.87), "500-contrast": white, "600-contrast": white, "700-contrast": white, "800-contrast": white, "900-contrast": white, "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": rgba(0, 0, 0, 0.87), "A400-contrast": white, "A700-contrast": white, "contrast-contrast": null) isn't a valid CSS value.
on line 1081 of node_modules/@angular/material/_theming.scss

$result: map_merge($result, (

-------------^

[18:46:15] Finished 'sass' after 135 ms```

[neogenz]

And i have this error if i try to compile my custom-angular-material.scss from .angular-cli.json :

Error: Undefined variable: "$config".
        on line 2512 of node_modules/@angular/material/_theming.scss
        from line 1 of src/assets/style/angular-material-custom.scss

To see my version of this, my package.json :

{
  "name": "front-pulpe",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.3",
    "@angular/common": "^4.2.3",
    "@angular/compiler": "^4.2.3",
    "@angular/compiler-cli": "^4.2.3",
    "@angular/core": "^4.2.3",
    "@angular/forms": "^4.2.3",
    "@angular/http": "^4.2.3",
    "@angular/material": "2.0.0-beta.6",
    "@angular/platform-browser": "^4.2.3",
    "@angular/platform-browser-dynamic": "^4.2.3",
    "@angular/platform-server": "^4.2.3",
    "@angular/router": "^4.2.3",
    "@ultimate/ngxerrors": "^1.3.0",
    "angular-2-local-storage": "^1.0.1",
    "angular2-jwt": "^0.2.3",
    "bootstrap": "^4.0.0-alpha.6",
    "chart.js": "^2.6.0",
    "core-js": "^2.4.1",
    "daemonite-material": "^4.0.0-alpha.6",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "moment": "^2.18.1",
    "ng-sidebar": "^4.2.3",
    "ng2-bootstrap-modal": "^1.0.1",
    "ng2-charts": "^1.6.0",
    "ng2-slim-loading-bar": "^4.0.0",
    "rxjs": "^5.4.1",
    "tether": "^1.4.0",
    "typescript": "^2.3.4",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@angular/cli": "^1.1.2",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "electron": "^1.6.11",
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "^2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.4.2",
    "typescript": "~2.0.0"
  }
}

[xonuzofa]

Your fix allows me to build but is causing an issue with the prefix like so:

<div class="col-sm-6">
    <md-input-container>
        <input mdInput type="text" placeholder="Final Price" formControlName="cost_string">
            <span md-prefix *ngIf="form.controls.cost_string.value">$&nbsp;</span>
    </md-input-container>
</div>

[xonuzofa]

Use mdPrefix instead of md-prefix. Fixes issue.

[neogenz]

Thx for this bug quickly fixed, know i can compile _theming.scss.
But if i use custom theme like as below, i have still errors.

My theme customization :

@import '../../../node_modules/@angular/material/theming';
@import "typography";
/****** FIX by MDS ***/
@import "colors"; //Use this color during the problem with $candy-app-primary is not resolved by angular material team
/***** FIX by MDS ****/

@include mat-core();

$candy-app-primary: mat-palette($mat-deep-orange);
$candy-app-accent: mat-palette($mat-blue, A200);
$candy-app-warn: mat-palette($mat-amber, A700);

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

@include angular-material-theme($candy-app-theme);

.mat-radio-button.mat-accent {
&.mat-radio-checked {
.mat-radio-outer-circle {
border-color: $candy-app-primary;
}
}
.mat-radio-inner-circle {
background-color: $candy-app-primary;
}
}

Errors :

error ./src/assets/style/angular-material-custom.scss (Line 67: (50: #fbe9e7, 100: #ffccbc, 200: #ffab91, 300: #ff8a65, 400: #ff7043, 500: #ff5722, 600: #f4511e, 700: #e64a19, 800: #d84315, 900: #bf360c, A100: #ff9e80, A200: #ff6e40, A400: #ff3d00, A700: #dd2c00, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: rgba(0, 0, 0, 0.87), 400: rgba(0, 0, 0, 0.87), 500: white, 600: white, 700: white, 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: rgba(0, 0, 0, 0.87), A400: white, A700: white), default: #ff5722, lighter: #ffccbc, darker: #e64a19, default-contrast: white, lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: white, "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": rgba(0, 0, 0, 0.87), "400-contrast": rgba(0, 0, 0, 0.87), "500-contrast": white, "600-contrast": white, "700-contrast": white, "800-contrast": white, "900-contrast": white, "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": rgba(0, 0, 0, 0.87), "A400-contrast": white, "A700-contrast": white, "contrast-contrast": null) isn't a valid CSS value.)

Sass version :

I compile with Sass, version : Sass 3.4.24 (Selective Steve)

So, I failed somewhere ?

Thanks.

[evanjmg]

Still getting this with the latest beta.7 - beta.5 works fine ->

 ERROR in ./~/css-loader?sourceMap!./~/sass-loader?sourceMap!./src/app/styles/app.component.scss
    Module build failed: 
          ($mat-input-subscript-margin-top + $mat-input-line-height) * $mat-input-subscript-font-scale;
     ^
          Mixins may not be defined within control directives or other mixins.
          in /Users/evangillogley/Desktop/dev/web/Project/node_modules/@angular/material/_theming.scss (line 2437, column 3)

[crisbeto]

The fix wasn't a part of the latest beta. You can wait for the next one or install the latest master build:

npm install angular/material2-builds angular/cdk-builds

[Gopinath-B-G]

Hi All I have issue in built css in Liferay while creating portlet
directory structure is as below:

Consol view:

Please Give me solutions for this problem.

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

<sub>_This action has been performed automatically by a bot._</sub>