使用LiveStyle在chrome中调试SASS问题

发布于 2022-08-28 12:01:22 字数 525 浏览 14 评论 0

最新版本的Chrome可以加载map文件,直接在审查元素的时候可以看到scss文件对应的行号,但是我一旦修改了相关的属性,文件就变成了css,而不是scss。

主要我是想配合LiveStyle使用,希望能直接映射scss,我看LiveStyle官网上是可以调节的。

PS,我说的调节,是scss中嵌套的样式,而不是直接的选择器:

/*like this*/
#container {
 .shadow-box {
    width: 100px;
    height: 100px;
    background: red;
 }
}

/*not this*/
#container .shadow-box {
    width: 100px;
    height: 100px;
    background: red;
}

如果我直接写下面的样式,LiveStyle能直接对应,但是我写上面那种嵌套,它就直接给我在文件下方添加了编译后的样式,达不到和我scss文件对应的关系了。。。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

暗藏城府 2022-09-04 12:01:22

同问吧。我也是直接用scss的。按要求修改但是没有用。chrome修改scss直接会变成css,还是需要把编译关掉求解。

// A scope selector for files that should be handled by LiveStyle.
// Currently, works for syntaxes that are very close to CSS: LESS and SCSS
// If you want to add LESS and SCSS support, change the value of this
// property to "source.css, source.scss"
"css_files_selector": "source.css, source.scss - source.css.scss"
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文