Question

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

我将webpack SASS加载程序配置为使用“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，并且只是避免为组件指定任何样式。并且只有1个common.css + common.css.map文件（用于调试）包含在index.html

中

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" />

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

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

Answer 1

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

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

export class Comp{}

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

使用sass并将其直接输入我的代码
使用Angular 2的view encapsulations

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

1 个答案: