在 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之后, 我得到了一些 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'
]
},
关于css - 如何在 Angular 2 中将 SASS 用于组件样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38313971/