Question

在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组件样式？

Answer 1

关注此wiki后，我得到了一些Error: Uncaught (in promise): Expected 'styles' to be an array of strings我使用此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'
    ]
  },

Answer 2

你可以在这样的组件中使用.scss -

styles: [require('normalize.css'), require('./app.scss')],

看看这是否有帮助。

Answer 3

我这样使用它：

knockout-3.4.0.js

Answer 4

现有package.json所在的项目文件夹中的命令行：npm install node-sass sass-loader raw-loader --save-dev

在webpack.common.js中，搜索“rules：”并将此对象添加到rules数组的末尾（不要忘记在上一个对象的末尾添加逗号）：

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}

然后在你的组件中：

@Component({
  styleUrls: ['./filename.scss'],
})

如何在Angular 2中使用SASS作为组件样式？

4 个答案: