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

Question

我正在使用Angular2 + WebPack + Typescript 1.7技术栈 + SASS + CommonJs。

我已经配置了webpack SASS loader来监视使用"style!css!sass"加载器的scss文件。

在我的组件中，我有@View修饰符，其中包含styles或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文件（用于调试）即可。

P.S. 关于最后一种方法（合并所有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编写）都已经合并成一个名为styles.css的文件，在所有组件中只需要加载一次。

这种方法支持sourceMap，但在调试时需要澄清要修改哪个scss文件。而且，在Angular的@View声明中也没有任何信息。

- dr11

Answer 1

我不是很明白问题或问题，但我会尝试回答我理解的部分。对我来说，我认为你指定的两种方式都不是最好的。我使用的是：

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

export class Comp{}

这样包含样式表，我获得了两个好处：

1. 使用Sass并将其直接输入到我的代码中
2. 能够使用Angular 2的视图封装

- Mostafa Fateen