Merge branch 'master' of ssh://git.verdnatura.es:/var/lib/git/salix

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 build
+spliting.js

@salix/app/src/app.js

@@ -1,5 +1,5 @@
 import {bootstrap} from './bootstrap';
 import * as spliting from './spliting';
-import * as routes from './routes';
+import * as routes from './configroutes';
 
 bootstrap();

@salix/app/src/configroutes.js

@@ -0,0 +1,31 @@
+import * as core from '@salix/core';
+import * as spliting from './spliting';
+import * as deps from './spliting/deps.json';
+
+function loader(route) {
+    return function ($ocLazyLoad, $q) {
+        return $q((resolve) => {
+            core.splitingRegister.execute(route.module).then(function (dependencies) {
+                var array = dependencies.map((item) => { return { name: item } });
+                resolve($ocLazyLoad.load(array));
+            });
+        });
+    };
+}
+
+function config($stateProvider, $urlRouterProvider) {
+    core.splitingRegister.registerGraph(deps);
+
+	for (var file in routes)
+    routes[file].forEach(function (route) {
+        $stateProvider.state(route.state, {
+            url: route.url,
+            template: route.template,
+            resolve: {
+                loader: loader(route)
+            }
+        })
+    });
+}
+
+core.module.config(config);

@salix/app/src/fake.js

@@ -1,41 +0,0 @@
-export const graphRoutes = {
-    routes: [
-        {
-            url: '/index',
-            state: 'index',
-            template: '<customer-index></customer-index>',
-            module: 'compras',
-            description: '',
-            image: '',
-        },
-        {
-            url: '/add',
-            state: 'add',
-            template: '<customer-add></customer-add>',
-            module: 'compras',
-            description: '',
-            image: '',
-        },
-        {
-            url: '/edit',
-            state: 'edit',
-            template: '<customer-edit></customer-edit>',
-            module: 'compras',
-            description: '',
-            image: '',
-        },
-        {
-            url: '/delete',
-            state: 'delete',
-            template: '<customer-delete></customer-delete>',
-            module: 'compras',
-            description: '',
-            image: '',
-        }
-    ],
-
-    graphDependendies: {
-        compras: ["crud"],
-        crud: []
-    }
-};

@salix/app/src/routes.js

@@ -1,40 +0,0 @@
-import * as core from '@salix/core';
-import * as spliting from './spliting';
-<<<<<<< HEAD
-
-function config($stateProvider, $urlRouterProvider) {
-    function loader($ocLazyLoad, $q) {
-        return $q(resolve => {
-            spliting.crud(() => {
-                resolve($ocLazyLoad.load({name: 'crud'}));
-=======
-import * as routes from './fake';
-
-core.module.config(function ($stateProvider, $urlRouterProvider) {
-    core.splitingRegister.registerGraph(routes.graphRoutes.graphDependendies);
-
-    function loader(route) {
-        return function loader($ocLazyLoad, $q) {
-            return $q((resolve) => {
-                core.splitingRegister.execute(route.module).then(function(dependencies){
-                    var array = dependencies.map((item) => { return { name: item } });
-                    resolve($ocLazyLoad.load(array));
-                });                                  
->>>>>>> 0bfbc5e0642bb669d8568ea1ce1782fde1702aa6
-            });
-        });
-    }
-
-    $urlRouterProvider.otherwise("/");
-
-    routes.graphRoutes.routes.forEach(function (route) {
-        $stateProvider.state(route.state, {
-            url: route.url,
-            template: route.template,
-            resolve: {
-                loader: loader(route)
-            }
-        })
-    });
-});
-

@salix/app/src/spliting.js

@@ -1,28 +0,0 @@
-import * as core from '@salix/core';
-
-export const compras = () => {
-  return new Promise(resolve => {
-    require.ensure([], () => {
-      require('@salix/compras');
-      resolve('compras');
-    }, "salix.compras");
-  });
-};
-
-core.splitingRegister.register('compras', compras);
-
-export const ventas = () => {
-  require.ensure([], () => {
-    require('@salix/ventas')
-  }, "salix.ventas");
-};
-
-core.splitingRegister.register('ventas', ventas);
-
-export const pagos = () => {
-  require.ensure([], () => {
-    require('@salix/pagos')
-  }, "salix.pagos");
-};
-
-core.splitingRegister.register('pagos', pagos);

@salix/app/src/spliting/deps.json

@@ -0,0 +1,5 @@
+{
+	"app": ["buys", "crud"],
+    "buys": ["crud"],
+    "crud": []
+}

@salix/app/src/spliting/import.tpl.js

@@ -0,0 +1 @@
+import * as core from '@salix/core';

@salix/app/src/spliting/require.tpl.js

@@ -0,0 +1,11 @@
+
+export const $module = () => {
+  return new Promise(resolve => {
+    require.ensure([], () => {
+      require('@salix/$module');
+      resolve('$module');
+    }, "salix.$module");
+  });
+};
+
+core.splitingRegister.register('$module', $module);

@salix/buys/index.js

@@ -0,0 +1,2 @@
+export * from './src/buys';
+

@salix/compras/index.js

@@ -1,2 +0,0 @@
-export * from './src/compras';
-

@salix/compras/src/spliting.js

@@ -1,12 +0,0 @@
-import * as core from '@salix/core';
-
-export const crud = () => {
-  return new Promise(resolve => {
-    require.ensure([], () => {
-      require('@salix/crud');
-      resolve('crud');
-    }, "salix.crud");
-  });
-};
-
-core.splitingRegister.register('crud', crud);

@salix/core/src/check/check.mt.html

@@ -1,3 +1,4 @@
-<input type="checkbox" class="*[className]*" *[enabled]* >
- <span class="mdl-checkbox__label"> *[text]*</span>  
-
+<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="*[name]*">
+	<input type="checkbox" name="*[name]*" id="*[name]*" class="*[className]*" *[enabled]*>
+	<span class="mdl-checkbox__label">*[label]*</span>
+</label>

@salix/core/src/check/check.mt.js

@@ -5,7 +5,7 @@ import template from './check.mt.html';
 
 const _NAME = 'check';
 const DEFAULT_TEXT = 'check';
-const DEFAULT_CLASS = 'mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect';
+const DEFAULT_CLASS = 'mdl-checkbox__input';
 
 export const NAME = util.getFactoryName(_NAME + constant.MATERIAL_DESIGN_FRAMEWORK);
 
@@ -13,8 +13,9 @@ export function factory() {
     return {
         template: template,
         default: {
-            text: DEFAULT_TEXT,
+            label: DEFAULT_TEXT,
             enabled: 'true',
+            id: 'checkboxId',
             className: DEFAULT_CLASS
         }
     }

@salix/core/src/core.js

@@ -25,3 +25,15 @@ export {NAME as TEXTFIELDBT,factory as textfieldbt} from './textfield/textfield.
 export {NAME as LABEL,directive as LabelDirective} from './label/label'
 export {NAME as LABELMT,factory as labelmt} from './label/label.mt'
 export {NAME as LABELBT,factory as labelbt} from './label/label.bt'
+
+export {NAME as PASSWORD,directive as PasswordDirective} from './password/password'
+export {NAME as PASSWORDMT,factory as passwordmt} from './password/password.mt'
+export {NAME as SUBMIT,directive as SubmitDirective} from './submit/submit'
+export {NAME as SUBMITMT,factory as submitmt} from './submit/submit.mt'
+export {NAME as SNACKBAR,directive as SnackbarDirective} from './snackbar/snackbar'
+export {NAME as SNACKBARMT,factory as snackbarmt} from './snackbar/snackbar.mt'
+export {NAME as SPINNER,directive as SpinnerDirective} from './spinner/spinner'
+export {NAME as SPINNERMT,factory as spinnermt} from './spinner/spinner.mt'
+
+export {NAME as LOGIN, COMPONENT as LOGIN_COMPONENT} from './login/login';
+

@salix/core/src/login/login.html

@@ -0,0 +1,25 @@
+<div class="vn-login">
+	<div class="box-wrapper">
+	<div class="box">
+	<form id="form" action="http://localhost:3000/login">
+		<div class="header">
+			<img src="image/banner.svg" alt=""/>
+		</div>
+		<div class="form-group">
+			<vn-textfield label="E-Mail" name="email"></vn-textfield>
+		</div>
+		<div class="form-group">
+			<vn-password label="Password" name="password"></vn-password>
+		</div>
+		<div>
+			<vn-check label="Do not close session" name="remember"></vn-check>
+		</div>
+		<div class="footer">
+			<vn-submit></vn-submit>
+			<vn-spinner id="spinner"></vn-spinner>
+		</div>
+	</form>
+	</div>
+	</div>
+	<vn-snackbar id="snackbar"/></vn-snackbar>
+</div>

@salix/core/src/login/login.js

@@ -0,0 +1,88 @@
+import {module} from '../module';
+import template from './login.html';
+import style from './login.scss';
+
+export const COMPONENT = {
+    template: template,
+    controller: function () {
+		function $ (id) {
+			return document.getElementById (id);
+		}
+		
+		var self = this;
+		$('form').onsubmit = function () {
+			self._onSubmit ();
+			return false;
+		};
+
+		this._onSubmit = function () {
+			var params = '';
+			var elements = $('form').elements;
+
+			for (var i = 0; i < elements.length; i++)
+			if (elements[i].name) {			
+				if (params.length > 1)
+					params += '&';
+
+				params += elements[i].name +'='+
+					encodeURIComponent (elements[i].value);
+			}
+
+			var request = new XMLHttpRequest ();
+			request.open ('post', form.action, true);
+			request.setRequestHeader ('Content-Type',
+				'application/x-www-form-urlencoded');
+			request.onreadystatechange =
+				this._onLoginResponse.bind (this, request);
+			request.send (params);
+
+			$('spinner').firstChild.MaterialSpinner.start ();
+		};
+		this._onLoginResponse = function (request) {
+			$('spinner').firstChild.MaterialSpinner.stop ();
+
+			if (request.readyState !== 4)
+				return;
+
+			var data = null;
+
+			try {
+				var data = JSON.parse (request.responseText);
+				console.debug (data);
+			}
+			catch (e) {}
+
+			if (request.status == 200 && data)
+			{
+				sessionStorage.setItem ('token', data.accessToken);
+				window.location = 'index.html';
+			}
+			else
+			{
+				sessionStorage.setItem ('token', '');
+
+				var message;
+
+				switch (request.status)
+				{
+					case 401:
+						message = 'Invalid credentials';
+						break;
+					case 0:
+						message = 'Can\'t contact with server';
+						break;
+					default:
+						message = 'Something went wrong';
+				}
+			
+				var snackbar = $('snackbar');
+				snackbar.firstChild.MaterialSnackbar.showSnackbar ({
+					message: message
+				});
+			}
+		}
+	}
+};
+
+module.component('vnLogin', COMPONENT);
+

@salix/core/src/login/login.scss

@@ -0,0 +1,47 @@
+
+.vn-login
+{
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	margin: 0;
+	padding: 0;
+	color: #333;
+	font-size: 1.1em;
+	font-weight: normal;
+	background-color: #EEE;
+
+	.box-wrapper
+	{
+		position: relative;
+		max-width: 20em;
+		margin: auto;
+		height: inherit;
+	}
+	.box
+	{
+		box-sizing: border-box;
+		position: absolute;
+		top: 50%;
+		width: 100%;
+		height: 18em;
+		margin-top: -9em;
+		padding: 1em;
+		background-color: white;
+		box-shadow: 0 0 .3em 0 rgba(1,1,1,.4);
+		border-radius: .1em;
+	}
+	.footer
+	{
+		margin-top: 1em;
+		margin-left: 3em;
+		text-align: center;
+	}
+	input[type=submit]
+	{
+		display: inline;
+	}
+}
+
+@media (max-height: 50em){}
+

@salix/core/src/password/password.js

@@ -0,0 +1,18 @@
+import {module} from '../module';
+import * as resolveFactory from '../resolveDefaultComponents';
+import * as util from '../util';
+
+const _NAME = 'password';
+export const NAME = util.getName(_NAME);
+
+directive.$inject =[resolveFactory.NAME];
+export function directive (resolve){
+    return{
+        require:'E',
+        template: function(_,attr){
+           return resolve.getTemplate(_NAME, attr);
+        }
+    }
+}
+
+module.directive(NAME,directive);

@salix/core/src/password/password.mt.html

@@ -0,0 +1,4 @@
+<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+	<input class="*[className]*" type="password" name="*[name]*" *[enabled]*>
+	<label class="mdl-textfield__label">*[label]*</label>
+</div>

@salix/core/src/password/password.mt.js

@@ -0,0 +1,18 @@
+import {module} from '../module';
+import template from './password.mt.html';
+
+export const NAME = 'vnPasswordmtFactory';
+
+export function factory() {
+    return {
+        template: template,
+        default: {
+            label: 'Password',
+            name: 'password',
+            enabled: 'enabled',
+            className: 'mdl-textfield__input'
+        }
+    }
+}
+
+module.factory(NAME, factory);

@salix/core/src/snackbar/snackbar.js

@@ -0,0 +1,18 @@
+import {module} from '../module';
+import * as resolveFactory from '../resolveDefaultComponents';
+import * as util from '../util';
+
+const _NAME = 'snackbar';
+export const NAME = util.getName(_NAME);
+
+directive.$inject =[resolveFactory.NAME];
+export function directive (resolve){
+    return{
+        require:'E',
+        template: function(_,attr){
+           return resolve.getTemplate(_NAME, attr);
+        }
+    }
+}
+
+module.directive(NAME,directive);

@salix/core/src/snackbar/snackbar.mt.html

@@ -0,0 +1,4 @@
+<div class="*[className]*">
+	<div class="mdl-snackbar__text"></div>
+	<button class="mdl-snackbar__action" type="button"></button>
+</div>

@salix/core/src/snackbar/snackbar.mt.js

@@ -0,0 +1,16 @@
+import {module} from '../module';
+import template from './snackbar.mt.html';
+
+export const NAME = 'vnSnackbarmtFactory';
+
+export function factory() {
+    return {
+        template: template,
+        default: {
+        	message: 'Default message',
+            className: 'mdl-js-snackbar mdl-snackbar'
+        }
+    }
+}
+
+module.factory(NAME, factory);

@salix/core/src/spinner/spinner.js

@@ -0,0 +1,18 @@
+import {module} from '../module';
+import * as resolveFactory from '../resolveDefaultComponents';
+import * as util from '../util';
+
+const _NAME = 'spinner';
+export const NAME = util.getName(_NAME);
+
+directive.$inject =[resolveFactory.NAME];
+export function directive (resolve){
+    return{
+        require:'E',
+        template: function(_,attr){
+           return resolve.getTemplate(_NAME, attr);
+        }
+    }
+}
+
+module.directive(NAME,directive);

@salix/core/src/spinner/spinner.mt.html

@@ -0,0 +1,2 @@
+<div class="*[className]*">
+</div>

@salix/core/src/spinner/spinner.mt.js

@@ -0,0 +1,15 @@
+import {module} from '../module';
+import template from './spinner.mt.html';
+
+export const NAME = 'vnSpinnermtFactory';
+
+export function factory() {
+    return {
+        template: template,
+        default: {
+            className: 'mdl-spinner mdl-spinner--single-color mdl-js-spinner'
+        }
+    }
+}
+
+module.factory(NAME, factory);

@salix/core/src/submit/submit.js

@@ -0,0 +1,18 @@
+import {module} from '../module';
+import * as resolveFactory from '../resolveDefaultComponents';
+import * as util from '../util';
+
+const _NAME = 'submit';
+export const NAME = util.getName(_NAME);
+
+directive.$inject =[resolveFactory.NAME];
+export function directive (resolve){
+    return{
+        require:'E',
+        template: function(_,attr){
+           return resolve.getTemplate(_NAME, attr);
+        }
+    }
+}
+
+module.directive(NAME,directive);

@salix/core/src/submit/submit.mt.html

@@ -0,0 +1,2 @@
+<input type="submit" class="*[className]*" value="*[text]*" *[enabled]*>
+</input>

@salix/core/src/submit/submit.mt.js

@@ -0,0 +1,17 @@
+import {module} from '../module';
+import template from './submit.mt.html';
+
+export const NAME = 'vnSubmitmtFactory';
+
+export function factory() {
+    return {
+        template: template,
+        default: {
+            text: 'Submit',
+            className: 'mdl-button mdl-js-button mdl-button--raised',
+            enabled: 'true'
+        }
+    }
+}
+
+module.factory(NAME, factory);

@salix/core/src/textfield/textfield.mt.html

@@ -1,4 +1,4 @@
 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-    <input class="*[className]*" type="*[type]*" *[enabled]*>
-    <label class="mdl-textfield__label">*[text]*</label>
-  </div>
+	<input class="*[className]*" type="*[type]*" name="*[name]*" *[enabled]*>
+	<label class="mdl-textfield__label">*[label]*</label>
+</div>

@salix/core/src/textfield/textfield.mt.js

@@ -4,7 +4,7 @@ import * as constant from '../constants';
 import template from './textfield.mt.html';
 
 const _NAME = 'textfield';
-const DEFAULT_TEXT = 'text';
+const DEFAULT_LABEL = 'text';
 const DEFAULT_CLASS = 'mdl-textfield__input';
 const DEFAULT_TYPE = 'text';
 
@@ -14,7 +14,8 @@ export function factory() {
     return {
         template: template,
         default: {
-            text: DEFAULT_TEXT,
+            label: DEFAULT_LABEL,
+            name: 'textfield',
             enabled: 'enabled',
             className: DEFAULT_CLASS,
             type: DEFAULT_TYPE

@salix/core/src/util.js

@@ -35,6 +35,7 @@ export function getProviderName(name){
 export function getTemplateName(componentName,frameworkName){
     return componentName + '.' + frameworkName + '.' + '.html'
 }
+
 export function getVendorDependencies(vendors){
     let dependencies = [];
     Object.keys(vendors).forEach((vendor)=>{

@salix/crud/src/crud.js

@@ -1,8 +1,8 @@
 export * from './module';
 
 export {NAME as CUSTOMER_INDEX,
-    COMPONENT as CUSTOMER_INDEX_COMPONENT} from './customer/index';
+	COMPONENT as CUSTOMER_INDEX_COMPONENT} from './customer/index';
 export {NAME as CUSTOMER_ADD,
-    COMPONENT as CUSTOMER_ADD_COMPONENT} from './customer/index/add';
+	COMPONENT as CUSTOMER_ADD_COMPONENT} from './customer/index/add';
 export {NAME as CUSTOMER_LIST,
-     COMPONENT as CUSTOMER_LIST_COMPONENT} from './customer/index/list';
+	COMPONENT as CUSTOMER_LIST_COMPONENT} from './customer/index/list';

@salix/crud/src/customer/routes.js

@@ -0,0 +1,8 @@
+[{
+    url: '/index',
+    state: 'index',
+    template: '<customer-index></customer-index>',
+    module: 'crud',
+    description: '',
+    image: '',
+}]

@salix/crud/src/provider/routes.js

@@ -0,0 +1,8 @@
+[{
+	url: '/provider',
+	state: 'provider',
+	template: '<provider-index></provider-index>',
+	module: 'crud',
+	description: '',
+	image: '',
+}]

@salix/pagos/index.js

@@ -1,6 +0,0 @@
-import * as core from '@salix/core'
-import * as vendors from '@salix/vendor'
-import * as crud from '@salix/crud'
-import * as ventas from '@salix/ventas'
-import * as compras from '@salix/compras'
-console.log('pagos')

@salix/ventas/index.js

@@ -1,4 +0,0 @@
-import * as core from '@salix/core'
-import * as vendors from '@salix/vendor'
-import * as crud from '@salix/crud'
-console.log('ventas');

gulpfile.js

@@ -1,13 +1,72 @@
 
 var gulp = require ('gulp');
+var wrap = require('gulp-wrap');
 var concat = require ('gulp-concat');
 var babel = require ('gulp-babel');
+var fs = require ('fs');
 
-gulp.task ('default', function ()
+// Routes
+
+var fileTpl = '\n"<%=file.path%>": <%=contents%>';
+var globalTpl = 'var routes = {<%=contents%>\n}';
+
+gulp.task ('routes', function ()
 {
-	var js = gulp.src ('./@salix/crud/**/routes.js')
-		.pipe (concat ('salix.routes.js'))
+	return gulp.src ('./@salix/**/routes.js')
+		.pipe (wrap (fileTpl))
+		.pipe (concat ('salix.routes.js', {newLine: ','}))
+		.pipe (wrap (globalTpl))
 		.pipe (babel ({presets: ['es2015']}))
 		.pipe (gulp.dest ('./build/private'));
 });
 
+// Spliting
+
+var baseDir = './@salix/app/src/spliting';
+var depsFile = baseDir +'/deps.json';
+
+function splitingFunc ()
+{
+	try {
+		var jsonDeps = fs.readFileSync (depsFile);
+		var modules = JSON.parse (jsonDeps);
+	}
+	catch (e)
+	{
+		console.error (e);
+		return;
+	}
+	
+	var importTpl = fs.readFileSync (baseDir +'/import.tpl.js', 'utf8');
+	var requireTpl = fs.readFileSync (baseDir +'/require.tpl.js', 'utf8');
+
+	for (var modName in modules)
+	{
+		var deps = modules[modName];
+		var splitFile = './@salix/'+ modName +'/src/spliting.js';
+		
+		try {
+			fs.unlinkSync (splitFile);
+		}
+		catch (e) {}
+		
+		fs.appendFileSync (splitFile, importTpl);
+		
+		var i = deps.length;
+		while (i--)
+			fs.appendFileSync (splitFile,
+				requireTpl.replace (/\$module/g, deps[i]));
+	}
+}
+
+gulp.task ('spliting', function ()
+{
+	splitingFunc ();
+	//gulp.watch (depsFile, splitingFunc);
+});
+
+// Default
+
+gulp.task ('default', ['routes', 'spliting']);
+
+

index.html

@@ -1,6 +1,7 @@
 <!doctype html>
 <html>
 <head>
+	<meta charset="UTF-8">
     <title>Salix</title>    
 </head>
 <body>
@@ -11,6 +12,10 @@
 		<a ui-sref="edit">edit</a>
 		<a ui-sref="delete">delete</a>
 	</div>
+	<script
+		type="text/javascript"
+		src="build/private/salix.routes.js">
+	</script>
 	<script
 		type="text/javascript"
 		src="build/public/salix.app.js"

login.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="UTF-8">
+    <title>Salix</title>    
+</head>
+<body>
+	<vn-login id="login"></vn-login>
+	<script
+		type="text/javascript"
+		src="build/private/salix.routes.js">
+	</script>
+	<script
+		type="text/javascript"
+		src="build/public/salix.app.js"
+		selector="#login">
+	</script>
+</body>
+</html>

package.json

@@ -19,17 +19,22 @@
     "babel-core": "*",
     "babel-loader": "*",
     "babel-preset-es2015": "*",
+    "cors": "^2.8.1",
     "css-loader": "^0.25.0",
     "eslint": "^3.7.1",
     "eslint-config-angular": "^0.5.0",
     "eslint-config-google": "^0.6.0",
     "eslint-plugin-angular": "^1.4.1",
     "gulp": "^3.9.1",
-    "pre-commit": "^1.1.3",
-    "cors": "^2.8.1",
     "gulp-babel": "^6.1.2",
     "gulp-concat": "^2.6.0",
+    "gulp-insert": "^0.5.0",
+    "gulp-wrap": "^0.13.0",
+    "json-loader": "^0.5.4",
+    "node-sass": "^3.11.0",
+    "pre-commit": "^1.1.3",
     "raw-loader": "*",
+    "sass-loader": "^4.0.2",
     "style-loader": "^0.13.1",
     "webpack": "*",
     "webpack-dev-server": "*"
@@ -41,5 +46,7 @@
     "gulp": "gulp",
     "express": "node server.js"
   },
-  "pre-commit": [ "lint" ]
+  "pre-commit": [
+    "lint"
+  ]
 }

webpack.config.js

@@ -22,15 +22,18 @@ module.exports =
                 query: {
                     presets: ['es2015']
                 }
-            }, {
+            },{
                 test: /\.html$/,
                 loader: 'raw'
-            }, {
+            },{
                 test: /\.json$/,
                 loader: 'json'
-            }, {
+            },{
                 test: /\.css$/,
                 loader: 'style!css'
+            },{
+                test: /\.scss$/,
+                loader: 'style!css!sass'
             }
         ]
     },