VS Code SCSS 自动编译为 CSS

2023-11-26

我是编程新手,刚刚开始学习 HTML/CSS。 对于编码,我开始使用 VS Code。我真的很喜欢它。

到目前为止,我遇到的唯一问题是将 SCSS 自动编译为 CSS。 我搜索并阅读了许多解决方案,我发现最好的解决方案是在 VS Code 终端中使用 ruby​​ + sass + codesass --watch .它正在监视我的项目并在创建新的 SCSS 时创建新的 CSS。它正在观察 SCSS 的变化。但问题是每次启动 VS Code 时都必须输入此代码。

还尝试使用 Gulp 文件和 package.json 解决方案,但也无法使其自动启动。而且必须为每个项目单独制作。 我也尝试过Atom,它有sass-自动编译包,而且效果很好。所以,对我来说最简单的方法就是使用 Atom 然后忘记。但我想使用 VS Code。

因此,通常的问题是是否有可能为 VS Code 创建扩展来自动将 SCSS 编译为 CSS(类似于 Atom 的包,在我看来这是最好的)。或者也许有人可以用其他方式向我解释如何解决这个问题。


你需要两件事:

  • 任务.json file
  • 银翼杀手VS CODE 的扩展

从创建开始.vscode项目中的文件夹。

然后在其中创建任务.json文件包含以下内容:

{
    "version": "0.1.0",
    "command": "sass",
    "isShellCommand": true,
    "args": ["--watch", "."],
    "showOutput": "always"
}

现在,打开项目后,您可以通过单击运行任务Ctrl+Shift+B.

自动化流程使用银翼杀手扩大 -https://marketplace.visualstudio.com/items?itemName=yukidoi.blade-runner

打开项目后,Blade Runner 将自动运行任务:)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

VS Code SCSS 自动编译为 CSS 的相关文章

随机推荐

  • 按聚合字段值的查询集

    假设我有以下模型 class Contest title models CharField max length 200 description models TextField class Image title models CharF
  • 如何在 Eclipse 中生成 Javadoc HTML 文件?

    我在项目代码中编写了这样的 Javadoc 风格注释 Description param return 如何使用 Eclipse IDE 生成 Javadoc HTML 文件 Project gt Generate Javadoc In t
  • 在 AndEngine 中显示广告

    我正在尝试在 AndEngine 中使用 Greystrip 显示广告 我不知道这是如何完成的 因为它不使用布局来膨胀视图 而是使用精灵 我使用 BaseGameActivity 为我想要显示的每个场景创建应用程序 在 GreyStrip
  • Spring OAUTH2 - 访问令牌到期时间

    是否可以以编程方式更新 重置访问令牌的到期时间 如果是 哪个类 过滤器是执行此操作的最佳位置 以便可以在 JDBC 令牌存储中更新到期时间 要全局更新访问令牌的到期时间 您应该创建该实例DefaultTokenServices 注入到Aut
  • 请描述一下您使用 Microsoft C++/CLI 的体验 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心以获得指导 C CLI 是非常强大的语
  • 对 Liferay 中存储的角度应用程序执行量角器测试时出现“角度未定义”错误

    我正在 Ubuntu 14 04 虚拟主机上运行 我正在尝试使用 PROTRACTOR 和 Liferay 中托管的应用程序创建一些 E2E 测试 对于登录部分 不需要角度 使用量角器进行的测试是好的 页面登录并正确导航 但是当我尝试使用以
  • 你能用Java编写虚函数/方法吗?

    是否可以写virtualJava 中的方法 就像 C 中的方法一样吗 或者 是否有一种合适的 Java 方法可以实现来产生类似的行为 我可以举一些例子吗 From 维基百科 In Java 所有非静态方法都是通过 默认 虚函数 仅有的 方法
  • 自定义滑块控件

    我想自定义滑块控件 但找不到任何可应用的东西 我想要制作的滑块应该如下图所示 请任何人建议我怎样才能做到 试试这个代码 CGRect frame CGRectMake 174 12 0 120 0 40 customSlider UISli
  • Spring Boot如何返回我自己的验证约束错误消息

    当我的请求出现问题时 我需要有自己的错误响应主体 并且我正在尝试使用 NotEmpty约束消息属性返回错误消息 这是我的类 它使用我需要的主体返回错误消息 package c m nanicolina exceptions import o
  • 想要在Weblogic中启用GZip压缩

    我想为我的静态文件启用 GZIP 压缩 例如由 weblogic 服务器提供服务的 css 样式 javascript 任何人都可以帮助如何在 weblogic 服务器中配置此功能 Go to http sourceforge net pr
  • 平滑骰子损失如何可微?

    我正在通过最小化 keras 来训练 U Netdice loss解决此问题常用的函数 改编自这里 and here def dsc y true y pred smooth 1 y true f K flatten y true y pr
  • Android 中的 .dex 文件是什么?

    我有一些关于dex 文件 什么是dex安卓中的文件 dex 在 Android 上如何工作 如何使用它们来调试 Android 应用程序 它们与java类文件相似吗 我需要具体信息 请提供帮助 欢迎任何真实的例子 关于 dex 文件 该系统
  • 不同地区不同的认证方式

    我正在开发的网站有两个部分 一个部分使用普通表单身份验证 另一个部分使用基于 HMAC 的身份验证 基于表单的工作方式与正常情况一样 除了使用自定义会员资格提供程序 最令人沮丧的是 默认情况下 如果决定使用表单身份验证 它会将所有 401
  • ASP.NET Web 窗体是否阻止双击提交?

    我正在从事一个 ASP NET 4 0 Web Forms 项目 在中断了大约 5 年之后 我对提交行为感到困惑 在按钮的单击事件中 我使线程休眠 以便可以多次单击提交按钮 据我所知 ASP NET 正在阻止多次调用单击事件 这是真的 顺便
  • 参考折叠规则是什么?C++ 标准库如何利用它们?

    以下链接提供了 4 种形式的参考折叠 如果我正确的话 这些是唯一的 4 种形式 http thbecker net articles rvalue references section 08 html 从链接 A 变成A A 变成A A 变
  • 在Python中将turtle绘制的图像转换为PNG

    我正在用 Python 制作一个抽象艺术模板生成器 它接受最小半径 最大半径和圆数的输入 它在随机的地方绘制随机的圆圈 也满足用户的要求 我想将海龟图形转换为 PNG 以便用户可以随心所欲地编辑模板 但我不知道如何继续 这是我的代码 imp
  • 为什么这些创建引用的方式表现不同?

    下面的代码运行正确 let a mut 3 a 4 assert eq a 4 以下也运行 let a Some 3 let mut b a unwrap assert eq a unwrap 3 但以下内容无法编译 let a Some
  • 通过php流式传输mp3文件

    这是我的 php 代码 用于通过 php 流式传输 mp3 文件 set time limit 0 dirPath path of the directory songCode REQUEST c filePath dirPath song
  • 易失性重载?

    我听说 volatile 和 const 一样是重载的因素 如果函数被易失性参数重载 易失性版本什么时候被调用 我无法想象调用 volatile version 时的情况 这是一个例子 include
  • VS Code SCSS 自动编译为 CSS

    我是编程新手 刚刚开始学习 HTML CSS 对于编码 我开始使用 VS Code 我真的很喜欢它 到目前为止 我遇到的唯一问题是将 SCSS 自动编译为 CSS 我搜索并阅读了许多解决方案 我发现最好的解决方案是在 VS Code 终端中