将 scss 文件添加到 Stackblitz

Posted 2023-03-06

【中文标题】将 scss 文件添加到 Stackblitz

【英文标题】：Add scss file to the 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 并看看它是如何工作的：

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 配置也是 :)

【讨论】：

简直太棒了。太感谢了。希望stackblitz 震撼*** 和Ionic 世界:)

【参考方案2】：

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

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

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

【讨论】：

请告诉我上面的答案到底是什么不起作用？