如何将TypeScript WebPack ts-loader与Angular2 @View样式集成？

我正在使用Angular2 + WebPack + Typescript 1.7 stack + SASS + CommonJs.

我有webpack SASS加载器配置为使用"style!css!sass"加载器来监视scss文件.

在我的组件中,我有@View装饰器,它包含样式或styleUrls参数,可用于传递此组件的内联样式或样式URL.

如果我将指定其中一个@View参数,Angular2会自动加载指定的css文件或(或将内联css),这对我有用.

但是如果我将使用sass-loader + require(),这将使我能够将scss编译为css并将其内置到我的js文件中(我使用ts-loader并将所有脚本合并到app.js中) .

所以我可以使用stylesUrl通过Angular2自动预加载css文件.

@View({ stylesUrl: 'my.css'}) export class Component{}

或者我可以使用require('*.scss')将css合并到我的app.js中

require('styles/my.scss');
@View({}) export class Component{}

对此更好的方法是什么,我的意思是Angular2方式？

此外,我可以从所有scss文件预构建一些common.css,并且只是避免为组件指定任何样式.而且index.html中只包含1个common.css + common.css.map文件(用于调试)

PS关于最后一种方法(合并所有css文件)

//webpack.config.js
loaders: [
        {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract('style', ['css?sourceMap', 'sass?sourceMap']),
            include: path.join(__dirname, 'src', 'styles'),
        }
...
    plugins: [
    new ExtractTextPlugin("assets/path/styles.css?[hash]-[chunkhash]-[contenthash]-[name]", {
        disable: false,
        allChunks: true
    })


//index.html

所以现在我有CDN供应商链接到css.所有我的自定义css(用scss编写)都合并到1个文件styles.css中,它们为所有组件加载一次.

此方法启用了sourceMap.但澄清在调试中修改哪个scss文件有点棘手..而且Angular @View声明中也没有任何信息