Angular 2 Protractor cannot require .scss files - sass

Question

I'm trying to run a Protractor Test using Angular 2 and Webpack
Partial Webpack config:
resolve: {
extensions: ['', '.ts', '.js', '.scss', '.css']
},
module: {
loaders: [
// TypeScript
{ test: /\.ts$/, loader: 'ts-loader'},
// SCSS
{ test: /\.scss$/, exclude: /node_modules/, loaders: ['raw-loader', 'sass-loader']}
]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(true)
]
My home.component.ts
import { Component, Injectable } from '#angular/core';
#Component({
selector: 'home',
styles: [require('./home.component.scss')],
template: `<h4 class="page-home">Home</h4>`
})
#Injectable()
export class Home {}
And my home.component.scss
.page-home {
color: blue;
}
And my E2E:
require('../server');
describe('App', () => {
beforeEach(() => {
browser.get('/');
});
it('should have a title', (done) => {
let subject = browser.getTitle();
subject
.then((data) => {
let result = 'test';
expect(data).toEqual(result);
done();
});
});
it('should definitely pass', () => {
expect(true).toEqual(true);
});
});
I run the server and everything comes up as expected. When I run my E2E tests I get the following error:
[14:42:47] I/hosted - Using the selenium server at http://hub.browserstack.com/wd/hub
[14:42:47] I/launcher - Running 1 instances of WebDriver
[14:43:03] E/launcher - Error: /app/src/app/home/home.component.scss:1
(function (exports, require, module, __filename, __dirname) { .page-home {
^
SyntaxError: Unexpected token .
at Object.exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:513:28)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at home.component.ts:5:12
at Object.<anonymous> (home.component.ts:9:21)
[14:43:03] E/launcher - Process exited with error code 100
npm info lifecycle cnd-app#1.0.0~protractor: Failed to exec protractor script
npm ERR! Linux 3.19.0-59-generic
npm ERR! argv "/usr/local/bin/node" "/app/node_modules/.bin/npm" "run" "protractor"
npm ERR! node v6.2.0
npm ERR! npm v3.9.2
npm ERR! code ELIFECYCLE
npm ERR! cnd-app#1.0.0 protractor: `protractor protractor.conf.js`
npm ERR! Exit status 100
It seems like protractor uses require different than how WebPack treats it.Is there a config for this or anything I am missing?
** Update **
I am able to resolve the issue. I have a typescript register causing conflict in the protractor.conf.js.