Components: Unable to use @include mat-core(); in my style.scss in Angular4 Webpack 2

[bankimatglobant]

Bug, feature request, or proposal:

Unable to use @include mat-core(); in my style.scss in Angular4 Webpack 2. here is my package.json's dependencies and devDependencies.

"dependencies": {
"@angular/animations": "^4.0.2",
"@angular/common": "^4.0.2",
"@angular/compiler": "^4.0.2",
"@angular/core": "^4.0.2",
"@angular/forms": "^4.0.2",
"@angular/http": "^4.0.2",
"@angular/material": "^2.0.0-beta.3",
"@angular/platform-browser": "^4.0.2",
"@angular/platform-browser-dynamic": "^4.0.2",
"@angular/platform-server": "^4.0.2",
"@angular/router": "^4.0.2",
"@angularclass/conventions-loader": "^1.0.13",
"@angularclass/hmr": "^1.2.2",
"@angularclass/hmr-loader": "^3.0.2",
"angular2-cookie": "^1.2.2",
"async": "^2.4.0",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"http-server": "^0.9.0",
"ie-shim": "^0.1.0",
"jasmine-core": "^2.5.2",
"reflect-metadata": "^0.1.9",
"rxjs": "^5.1.0",
"zone.js": "0.8.5"
},
"devDependencies": {
"@angular/compiler-cli": "^4.0.0",
"@types/hammerjs": "^2.0.33",
"@types/jasmine": "2.5.38",
"@types/node": "^7.0.0",
"@types/selenium-webdriver": "~2.53.39",
"@types/source-map": "^0.5.0",
"@types/uglify-js": "^2.0.27",
"@types/webpack": "^2.0.0",
"add-asset-html-webpack-plugin": "^1.0.2",
"angular-router-loader": "^0.4.0",
"angular2-template-loader": "^0.6.0",
"assets-webpack-plugin": "^3.5.1",
"awesome-typescript-loader": "~3.0.0-beta.18",
"codelyzer": "~2.0.0-beta.4",
"copy-webpack-plugin": "^4.0.0",
"css-loader": "^0.26.0",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "~2.0.0-rc.3",
"file-loader": "^0.10.0",
"find-root": "^1.0.0",
"gh-pages": "^0.12.0",
"gulp": "^3.9.1",
"html-webpack-plugin": "^2.28.0",
"imports-loader": "^0.7.0",
"install": "^0.6.0",
"istanbul-instrumenter-loader": "2.0.0",
"jasmine-core": "^2.5.2",
"json-loader": "^0.5.4",
"karma": "^1.4.1",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.2.2",
"karma-remap-coverage": "^0.1.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "2.0.1",
"lodash": "^4.17.4",
"ng-router-loader": "^2.1.0",
"ngc-webpack": "1.1.0",
"node-sass": "^4.5.2",
"npm-run-all": "^4.0.1",
"optimize-js-plugin": "0.0.4",
"parse5": "^3.0.1",
"protractor": "^4.0.14",
"raw-loader": "^0.5.1",
"rimraf": "~2.6.0",
"sass-loader": "^4.1.1",
"script-ext-html-webpack-plugin": "^1.6.2",
"source-map-loader": "^0.1.5",
"string-replace-loader": "1.0.5",
"style-loader": "^0.16.0",
"to-string-loader": "^1.1.4",
"ts-helpers": "1.1.2",
"ts-node": "^2.0.0",
"tslib": "^1.5.0",
"tslint": "~4.5.1",
"tslint-loader": "^3.3.0",
"typedoc": "^0.5.3",
"typescript": "~2.2.1",
"url-loader": "^0.5.7",
"v8-lazy-parse-webpack-plugin": "^0.3.0",
"webpack": "2.3.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-dev-server": "2.4.1",
"webpack-dll-bundles-plugin": "^1.0.0-beta.5",
"webpack-merge": "~3.0.0"
},

It shows below error:

ERROR in ./~/css-loader!./~/sass-loader!./src/app/styles/style.scss
Module build failed:
@include mat-core();
^
No mixin named mat-core

Backtrace:
stdin:4
in D:\Bankim\local\Delivery Skeleton\src\appstylesstyle.scss (line 4, column 10)
@ ./src/app/styles/style.scss 4:14-124
@ ./src/app/app.module.ts
@ ./src/app/index.ts
@ ./src/main.browser.ts
@ multi (webpack)-dev-server/client?http://localhost:3000 ./src/main.browser.ts
Child html-webpack-plugin for "index.html":
chunk {0} index.html 542 kB [entry]
+ 4 hidden modules
webpack: Failed to compile.

What is the expected behavior?

What is the current behavior?

It gives compile time error and stuck at that point.

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

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

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

Angular 4 , ^2.0.0-beta.3, windows

Is there anything else we should know?

Thanks,
Bankim Sutaria

[EdricChan03]

Can we see your style.scss file?

It should have the following line on top of the file:

@import '~@angular/material/theming';

[bankimatglobant]

@Chan4077

Here is my style.scss

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

body{
min-width: 600px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
color: #272727;
font-family: 'Open Sans','Helvetica Neue','Helvetica','Arial',sans-serif;
font-style: normal;
font-weight: 300;
font-size: 14px;
line-height: 1.6;
overflow-x: auto;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;
}

When I add @include mat-core(); it gives above mention error. What is exact use of @include mat-core(); ?

[willshowell]

The mat-core mixin is responsible for adding styles for elevation, ripple, overlay, etc that are not theme dependent.

It has already been included in the prebuilt theme files before being compiled to css, so that's why you it's not available to you in your current styles.scss. If you chose to build a custom theme instead of using the prebuilt indigo-pink theme, then you would need to include it. Otherwise it is fine to omit.

[jelbourn]

What @willshowell said.

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