如何在Angular 2中使用SASS组件样式？ [英] How to use SASS for components style in Angular 2?

问题描述

在Angular 2中，当我们定义一个组件时，我们可以为装饰器指定一个 styleUrls 属性，指向要应用于组件的一组样式表：

In Angular 2 when we define a component we can specify a styleUrls property to the decorator which points to a set of stylesheets to be applied to the component:

@Component({
    selector: 'the-app'
    templateUrl: 'templateFile.html',
    styleUrls: ['componentStyles.css', 'moreComponentStyles.css']
})
export class TheAppComponent {}

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

Now, what if I want to write these styles with SASS?

我知道我需要使用Gulp或Grunt将SCSS样式表转换为纯CSS。

I know I would need to use Gulp or Grunt to transpile the SCSS stylesheets to plain CSS. But this makes me confused on how we would correctly point Angular to the correct stylesheets.

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

How could I organize this workflow of using SASS with Gulp/Grunt together with Angular 2? How to use SASS to write the Angular 2 components styles?

推荐答案

下面这个 wiki ，我得到一些错误：未捕获in promise）：预期的styles是一个字符串数组，我使用此 answer >。

After following this wiki, I got some Error: Uncaught (in promise): Expected 'styles' to be an array of strings which I resolved using this 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'
    ]
  },

这篇关于如何在Angular 2中使用SASS组件样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！