将 scss 文件添加到 Stackblitz答案

【问题标题】：Add scss file to the Stackblitz将 scss 文件添加到 Stackblitz
【发布时间】：2018-02-25 09:53:12
【问题描述】：

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

我已尝试添加home.html

这是项目： stackblitz

【问题讨论】：

具体是在哪里添加的？
希望你能看到使用上面的链接没有？我试图home 文件夹。 @voloshin
我打开了除此之外的所有文件夹。 :) 现在我看到了一个.scss 文件。也许这听起来有点奇怪，但您知道您应该将scss 编译为css 以将其包含到页面中吗？因为我在你的项目中看不到 scss 编译器。
我该怎么做？我刚开始使用stckblitz。 @voloshin
好的，现在我们知道问题所在了。我要创建一个答案，请稍等。

【解决方案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] 之类的属性添加到样式中。

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

但是我们可以禁用封装：

encapsulation: ViewEncapsulation.None

另请参阅此主题

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

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

【讨论】：

【解决方案2】：

以上答案不再起作用。更新：

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

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

【讨论】：