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

Nathan-Ryan · 2017-06-20T04:08:30Z

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

The text was updated successfully, but these errors were encountered:

Nathan-Ryan · 2017-06-20T04:25:38Z

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

Faltek · 2017-06-20T08:05:16Z

Have the same issue.

Alyaeri · 2017-06-20T11:51:10Z

Also experiencing this issue with all my .scss files

kekel87 · 2017-06-20T12:34:12Z

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

jelbourn · 2017-06-20T14:50:03Z

@crisbeto we should probably separate the definitions anyway

neogenz · 2017-06-20T16:46:53Z

@kekel87

With gulp-sass 3.1.0, i have this error :

    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 · 2017-06-20T16:52:46Z

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"
  }
}

* Fixes an error in the input theming mixin that was caused by a nested mixin. * Removes the `mat-input-` prefix from the mixin local variables since they're not exposed and don't need to be prefixed. Fixes angular#5232.

xonuzofa · 2017-06-22T02:55:45Z

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 · 2017-06-22T12:34:26Z

Use mdPrefix instead of md-prefix. Fixes issue.

* Fixes an error in the input theming mixin that was caused by a nested mixin. * Removes the `mat-input-` prefix from the mixin local variables since they're not exposed and don't need to be prefixed. Fixes #5232.

neogenz · 2017-06-23T01:47:54Z

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.

Adds a Stylelint rule that will prevent uses of nested mixins. This will help prevent issues like angular#5232 in the future.

Adds a Stylelint rule that will prevent uses of nested mixins. This will help prevent issues like #5232 in the future.

evanjmg · 2017-06-26T09:34:12Z

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 · 2017-06-26T09:50:49Z

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

Adds a Stylelint rule that will prevent uses of nested mixins. This will help prevent issues like angular#5232 in the future.

Gopinath-B-G · 2018-01-31T06:15:41Z

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 · 2019-09-08T06:02:22Z

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

jelbourn added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Jun 20, 2017

jelbourn assigned crisbeto Jun 20, 2017

crisbeto added the has pr label Jun 20, 2017

crisbeto mentioned this issue Jun 20, 2017

fix(input): theming mixin error #5254

Merged

angular deleted a comment from xmeng1 Jun 22, 2017

jelbourn closed this as completed in #5254 Jun 22, 2017

crisbeto added a commit to crisbeto/material2 that referenced this issue Jun 25, 2017

build: add stylelint rule to prevent nested mixins

6021567

Adds a Stylelint rule that will prevent uses of nested mixins. This will help prevent issues like angular#5232 in the future.

crisbeto mentioned this issue Jun 25, 2017

build: add stylelint rule to prevent nested mixins #5354

Merged

jelbourn pushed a commit that referenced this issue Jun 25, 2017

build: add stylelint rule to prevent nested mixins (#5354)

38b365c

Adds a Stylelint rule that will prevent uses of nested mixins. This will help prevent issues like #5232 in the future.

amcdnl pushed a commit to amcdnl/material2 that referenced this issue Jul 8, 2017

build: add stylelint rule to prevent nested mixins (angular#5354)

f1ffc60

Adds a Stylelint rule that will prevent uses of nested mixins. This will help prevent issues like angular#5232 in the future.

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Nathan-Ryan commented Jun 20, 2017 •

edited

Nathan-Ryan commented Jun 20, 2017 •

edited

Faltek commented Jun 20, 2017

Alyaeri commented Jun 20, 2017

kekel87 commented Jun 20, 2017

jelbourn commented Jun 20, 2017

neogenz commented Jun 20, 2017 •

edited

neogenz commented Jun 20, 2017

xonuzofa commented Jun 22, 2017

xonuzofa commented Jun 22, 2017

neogenz commented Jun 23, 2017

evanjmg commented Jun 26, 2017 •

edited

crisbeto commented Jun 26, 2017

Gopinath-B-G commented Jan 31, 2018

angular-automatic-lock-bot bot commented Sep 8, 2019

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

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

Comments

Nathan-Ryan commented Jun 20, 2017 • edited

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

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

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

Nathan-Ryan commented Jun 20, 2017 • edited

Faltek commented Jun 20, 2017

Alyaeri commented Jun 20, 2017

kekel87 commented Jun 20, 2017

jelbourn commented Jun 20, 2017

neogenz commented Jun 20, 2017 • edited

neogenz commented Jun 20, 2017

xonuzofa commented Jun 22, 2017

xonuzofa commented Jun 22, 2017

neogenz commented Jun 23, 2017

My theme customization :

Errors :

Sass version :

evanjmg commented Jun 26, 2017 • edited

crisbeto commented Jun 26, 2017

Gopinath-B-G commented Jan 31, 2018

angular-automatic-lock-bot bot commented Sep 8, 2019

Nathan-Ryan commented Jun 20, 2017 •

edited

Nathan-Ryan commented Jun 20, 2017 •

edited

neogenz commented Jun 20, 2017 •

edited

evanjmg commented Jun 26, 2017 •

edited