首页 文章

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

提问于
浏览 次
6

我正在使用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声明中也没有任何信息

sass webpack angular typescript1.7

1 回答

  • 1

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

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

export class Comp{}

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

    • 使用sass并将其直接输入到我的代码中

    • 能够使用Angular 2的view encapsulations

    回复于

相关问题