css – 如何在Angular 2中使用SASS作为组件样式?

前端之家收集整理的这篇文章主要介绍了css – 如何在Angular 2中使用SASS作为组件样式?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在Angular 2中,当我们定义一个组件时,我们可以为装饰器指定一个styleUrls属性,该属性指向要应用于组件的一组样式表:
@Component({
    selector: 'the-app'
    templateUrl: 'templateFile.html',styleUrls: ['componentStyles.css','moreComponentStyles.css']
})
export class TheAppComponent {}

现在,如果我想用SASS写这些样式怎么办?

我知道我需要使用Gulp或Grunt将SCSS样式表转换为纯CSS.但这让我对如何正确地将Angular指向正确的样式表感到困惑.

我如何组织使用SASS和Gulp / Grunt以及Angular 2的工作流程?如何使用SASS编写Angular 2组件样式?

解决方法

在关注这个 wiki后,我得到了一些错误:未捕获(在承诺中):期望的’styles’是一个字符串数组,我使用这个 answer解决了.

最终解决方案在这里:

home.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'home',template: require('./home.component.html'),styles: [ String(require('./home.component.scss')) ]
})

export class HomeComponent { }

webpack.conf.js :(部分)

{
    test: /\.(css|scss)$/,loaders: [
      'style','css','sass','postcss'
    ]
  },

猜你在找的CSS相关文章