将 scss 文件添加到 Stackblitz

2023-09-30前端开发问题
2

本文介绍了将 scss 文件添加到 Stackblitz的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

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

Can you tell me how to add scss file to the stackblitz. I tried that.But it is not working. Please see that and let me know.

我已尝试添加 home.html

这是项目: stackblitz

推荐答案

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] 之类的属性添加到样式中.

won't work for you with default encapsulation(ViewEncapsulation.Emulated) because page-home is not part of home component template and angular adds attribute like [_ngcontent-c0] to styles.

所以我们可以把 page-home 改成 ion-list 看看它是怎么工作的:

So we can change page-home to ion-list and see how it works:

Stackblitz 示例(ViewEncapsulation.Emulated)

但是我们可以禁用封装:

But we can disable encapsulation:

encapsulation: ViewEncapsulation.None

Stackblitz 示例(ViewEncapsulation.None)

另请参阅此主题

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

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

As EricSimons commented 9 days ago:

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

Hey all! We just shipped SASS and LESS support, and we also support the angular-cli.json config too :)

这篇关于将 scss 文件添加到 Stackblitz的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

Fatal error: Call to a member function fetch_assoc() on a no
业务场景:使用update语句去更新数据库字段。 原因:update接收值不正确。原来代码: $query = "UPDATE student SET date = now() WHERE id = $id";$result = $mysqli-query($query2) or die($mysqli-error); // 问题出现了在这句 $data = $result-fetch_ass...
2024-12-13 前端开发问题
136

layui 单选框、复选框、下拉菜单不显示问题如何解决?
1. 如果是ajax嵌套了 页面, 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09 前端开发问题
313

layui树状组件tree怎么默认勾选?
在layui树状组件tree中,勾选问题可以通过以下方法解决: 通过tree的oncheck事件来监听勾选操作,然后根据勾选状态进行相应的处理。例如: tree.on('check', function(obj) { // 获取勾选状态 var isChecked = obj.checked; // 获取当前节点数据 var data =...
2024-11-09 前端开发问题
372

layui laydate日期时间范围,时间默认设定为23:59:59
在Layui中,如果你想设置日期时间选择器(datetime)的默认结束时间为当天的23:59:59,你可以使用如下代码: laydate.render({ elem: '#test10' ,type: 'datetime' ,range: true ,max: '{:date("Y-m-d 23:59:59")}' ,ready: function(date){ $(".layui-laydat...
2024-10-24 前端开发问题
279

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271

layui中表单会自动刷新的问题
layui中表单会自动刷新的问题,因为用到layui的表单,遇到了刷新的问题所以记录一下: script layui.use(['jquery','form','layer'], function(){ var $ = layui.jquery, layer=layui.layer, form = layui.form; form.on('submit(tijiao)', function(data){ a...
2024-10-23 前端开发问题
262