将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组件模板的一部分，而角色会将类似[_ngcontent-c0]的属性添加到样式。< / p>

因此，我们可以将page-home更改为ion-list并查看其工作原理：

<强> Stackblitz Example (ViewEncapsulation.Emulated)

但我们可以禁用封装：

encapsulation: ViewEncapsulation.None

Stackblitz Example (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
})

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