SassError: SassError: Undefined mixin. sass variable or mixins not getting identified in Angular 12 scss application

[digish777]

SassError: SassError: Undefined mixin. sass variable or mixins not getting identified in Angular 12 scss application.

My _mixins.scss file content:

@mixin horizontal-box { display: flex; flex-direction: row; }

@import url("../app/_mixins.scss");

.result-box { @include horizontal-box; }

this is a freshly created angular 12 application with commmand: ng new angular12app

it straight away gave the error on command: ng serve

./src/app/app.component.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: SassError: Undefined mixin. ╷ 4 │ @include horizontal-box; │ ^^^^^^^^^^^^^^^^^^^^^^^ ╵ src\app\app.component.scss 4:3 root stylesheet

I lost 3 hours on this issue. Did not expect this from Angular.

Submitting an Issue

version of Angular CLI used: Angular 12.

Angular.json: { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "angular12": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" }, "@schematics/angular:application": { "strict": true } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/angular12", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss" ], "scripts": [] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "outputHashing": "all" }, "development": { "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "browserTarget": "angular12:build:production" }, "development": { "browserTarget": "angular12:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "angular12:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "inlineStyleLanguage": "scss", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss" ], "scripts": [] } } } } }, "defaultProject": "angular12" }

version of Angular DevKit used: "@angular-devkit/build-angular": "~12.0.1",

3rd-party libraries and their versions: none

Most importantly - a use-case that fails:

Step 1: create a file: _mixin.scss in the root folder: -> content of the _mixin.scss @mixin horizontal-box { display: flex; flex-direction: row; }

Step 2: import the mixin to app.component.scss:

@import url("_mixin.scss");

.result-box { @include horizontal-box; }

Step 3: Run ng serve from console: Error: ./src/app/app.component.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: SassError: Undefined mixin. ╷ 4 │ @include horizontal-box; │ ^^^^^^^^^^^^^^^^^^^^^^^ ╵ src\app\app.component.scss 4:5 root stylesheet at Object.callback (D:\PROJECTS\Angular12\angular12\node_modules\sass-loader\dist\index.js:54:16) at Worker. (D:\PROJECTS\Angular12\angular12\node_modules\@angular-devkit\build-angular\src\sass\sass-service.js:123:25) at Worker.emit (node:events:365:28) at MessagePort. (node:internal/worker:241:53) at MessagePort.[nodejs.internal.kHybridDispatch] (node:internal/event_target:461:20) at MessagePort.exports.emitMessage (node:internal/per_context/messageport:23:28)

Hopefully You understood what to do. If not ping back, I will respond.

I have attached the source:

app.zip

In case, You have this feeling that , You do not have the source. Kindly request You not to close this thread on Your own

[alan-agius4]

@digish777, @import url is not a valid syntax to load Sass files.

See https://sass-lang.com/documentation/at-rules/import. Also as mentioned in the link provided @import is in deprecation phase.

- @import url("_mixins");  // incorrect. Wrong syntax, filename and path.
+ @import "../mixin"; // deprecated
+ @use "../mixin"; // current

[alan-agius4]

NB: when using @use you need to reference the mixin from a namespace.

@use "../mixin";

.result-box {
    @include mixin.horizontal-box;
}

@use "../mixin" as m;

.result-box {
    @include m.horizontal-box;
}

See: https://sass-lang.com/documentation/at-rules/use

[digish777]

@alan-agius4 apologise for opening so many issue. or as per You spamming.

This working solution, I got from You : @use "../mixin";

.result-box { @include mixin.horizontal-box; }

@use "../mixin" as m;

.result-box { @include m.horizontal-box; }

after opening 3 issues. If You would have pointed this out in the very first time instead of closing the issue straight away. I would not have opened multiple issue for a same issue.

Thanks.

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