将scss文件添加到Stackblitz

Question

你能告诉我如何将scss文件添加到stackblitz 。 我试过了。但它不起作用。 请看到并告诉我。

我试图添加home.html

这是项目： stackblitz

Answer 1

Scss应该在stackblitz中工作 ：

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styleUrls: [ './home.scss' ] <== add this
})
export class HomePage {

风格如

 page-home {
 .buttoncls {

默认封装（ ViewEncapsulation.Emulated ）不适合您，因为page-home不是home组件模板的一部分，而angular将[_ngcontent-c0]等属性添加到样式中。

所以我们可以将page-home更改为ion-list并查看它是如何工作的：

Stackblitz示例（ViewEncapsulation.Emulated）

但我们可以禁用封装：

encapsulation: ViewEncapsulation.None

Stackblitz示例（ViewEncapsulation.None）

另见此主题

https://github.com/stackblitz/core/issues/1

正如EricSimons在9天前评论过的那样：

大家好！ 我们刚刚发布了SASS和LESS支持，我们也支持angular-cli.json配置:)

Answer 2

以上答案不再适用。 更新：

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styleUrls: [ 'home.scss' ] <== add this
})

此外 - 样式必须在最外面的块中，不应该在其他块下面。