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

我正在使用Angular2 WebPack Typescript 1.7堆栈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文件(用于调试)

附：关于最后一种方法(合并所有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
<link rel="stylesheet" href="assets/path/styles.css" />

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

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

解决方法

好吧,我不太明白这些问题,但我会尽力回答我的理解.
所以对我来说,我认为你指定的两种方式都不是最好的方法.我用的是：

@Component({
 selector: 'message',template: '<p class = {{class}}> whatever html </p>',styles: [ require('./style.scss')],})

export class Comp{}

因此,通过包含样式表,我获得了两件事：

>使用sass并将其直接输入到我的代码中
>使用Angular 2的view encapsulations的能力