Global style imported but not applied in @angular/cli version 1.0.3

[omkadiri]

Global style is not working/applied on the page with new style loader config

using ng eject config

i import a css file in the global style file
style.scss file
@import "file/global.scss";

webpack.config.js file
"styles": [ "./src\\styles.scss" ]

compile style.bundle.js file:

`webpackJsonp([2],{

// 10:
// (function(module, exports) {

/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function() {
var list = [];

// return the list of modules as css string
list.toString = function toString() {
	var result = [];
	for(var i = 0; i < this.length; i++) {
		var item = this[i];
		if(item[2]) {
			result.push("@media " + item[2] + "{" + item[1] + "}");
		} else {
			result.push(item[1]);
		}
	}
	return result.join("");
};

// import a list of modules into the list
list.i = function(modules, mediaQuery) {
	if(typeof modules === "string")
		modules = [[null, modules, ""]];
	var alreadyImportedModules = {};
	for(var i = 0; i < this.length; i++) {
		var id = this[i][0];
		if(typeof id === "number")
			alreadyImportedModules[id] = true;
	}
	for(i = 0; i < modules.length; i++) {
		var item = modules[i];
		// skip already imported module
		// this implementation is not 100% perfect for weird media query combinations
		//  when a module is imported multiple times with different media queries.
		//  I hope this will never occur (Hey this way we have smaller bundles)
		if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
			if(mediaQuery && !item[2]) {
				item[2] = mediaQuery;
			} else if(mediaQuery) {
				item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
			}
			list.push(item);
		}
	}
};
return list;

};

/***/ }),

// 111:
// (function(module, exports, webpack_require) {

exports = module.exports = webpack_require(10)();
// imports

// module
exports.push([module.i, "/* You can add global styles to this file, and also import other style files /\n li::first-line {\n text-shadow: none !important;\n box-shadow: none !important; }\n a,\n a:visited {\n text-decoration: underline; }\n abbr[title]::after {\n content: " (" attr(title) ")"; }\n pre {\n white-space: pre-wrap !important; }\n pre,\n blockquote {\n border: 1px solid #999;\n page-break-inside: avoid; }\n thead {\n display: table-header-group; }\n tr,\n img {\n page-break-inside: avoid; }\n p,\n h2,\n h3 {\n orphans: 3;\n widows: 3; }\n h2,\n h3 {\n page-break-after: avoid; }\n .navbar {\n display: none; }\n .badge {\n border: 1px solid #000; }\n .table {\n border-collapse: collapse !important; }\n .table td,\n .table th {\n background-color: #fff !important; }\n .table-bordered th,\n .table-bordered td {\n border: 1px solid #ddd !important; } }\n\nhtml {\n box-sizing: border-box; }\n\n,\n*::before,\n*::after {\n box-sizing: inherit; }\n\n@-ms-viewport {\n width: device-width; }\n\nhtml {\n -ms-overflow-style: scrollbar;\n -webkit-tap-highlight-color: transparent; }\n\nbody {\n font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;\n font-size: 1rem;\n font-weight: normal;\n line-height: 1.5;\n color: #292b2c;\n background-color: #fff; }\n\n[tabindex="-1"]:focus {\n outline: none !important; }\n\nh1, h2, h3, h4, h5, h6 {\n margin-top: 0;\n margin-bottom: .5rem; }\n\np {\n margin-top: 0;\n margin-bottom: 1rem; }\n\nabbr[title],\nabbr[data-original-title] {\n cursor: help; }\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit; }\n\nol,\nul,\ndl {\n margin-top: 0;\n margin-bottom: 1rem; }\n\nol ol,\nul ul,\nol ul,\nul ol {\n margin-bottom: 0; }\n\ndt {\n font-weight: bold; }\n\ndd {\n margin-bottom: .5rem;\n margin-left: 0; }\n\nblockquote {\n margin: 0 0 1rem; }\n\na {\n color: #0275d8;\n text-decoration: none; }\n a:focus, a:hover {\n color: #014c8c;\n text-decoration: underline; }\n\na:not([href]):not([tabindex]) {\n color: inherit;\n text-decoration: none; }\n a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {\n color: inherit;\n text-decoration: none; }\n a:not([href]):not([tabindex]):focus {\n outline: 0; }\n\npre {\n margin-top: 0;\n margin-bottom: 1rem;\n overflow: auto; }\n\nfigure {\n margin: 0 0 1rem; }\n\nimg {\n vertical-align: middle; }\n\n[role="button"] {\n cursor: pointer; }\n\na, } }\n", ""]);

// exports

/*** EXPORTS FROM exports-loader ***/
module.exports = module.exports.toString();

/***/ }),

// 278:
// (function(module, exports, webpack_require) {

webpack_require(26);
module.exports = webpack_require(111);

/***/ })

},[278]);
//# sourceMappingURL=styles.bundle.js.map`

However the style is not getting applied. anything am missing here?

[omkadiri]

I miss a config...the import is working fine after i added the file tension in the include and exclude. this should be close...

[scottseeker]

@omkadiri Can you explain in more detail about what you had to add to the include/exclude? I assume you mean the include/exclude sections of the tsconfig?

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