热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

VSCodeSCSS自动编译为CSS

如何解决《VSCodeSCSS自动编译为CSS》经验,为你挑选了1个好方法。

我是编程的初学者,刚开始学习HTML/CSS.为了编码,我开始使用VS Code.我真的很喜欢它.

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

尝试使用Gulp文件和package.json解决方案,但也无法使其自动启动.必须分别为每个项目制作.我也试过Atom,它有sass-autocompile包,它运行得很好.所以,最简单的方法是使用Atom并忘记.但我想使用VS Code.

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



1> 小智..:

你需要两件事:

tasks.json文件

适用于VS CODE的Blade Runner扩展

首先在项目中创建.vscode文件夹.

然后在其中创建具有以下内容的tasks.json文件:

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

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

要使流程自动化,请使用Blade Runner扩展 - https://marketplace.visualstudio.com/items?itemName=yukidoi.blade-runner

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


推荐阅读
  • 我在SCSS中为网格列(12列)提供了一个@for函数。我的SASS功能:@for$ifrom1through12 ... [详细]
  • 保持sass条理性和可读性的最基本的三个方法:嵌套、导入和注释安装sass和compassruby-v查看ruby版本gemsources—removehttps:rubyg ... [详细]
  • CSSandSass(SCSS)stylerulesIDandclassnamingID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称。代替表象和 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • 程序员如何选择机械键盘轴体?红轴和茶轴对比
    本文介绍了程序员如何选择机械键盘轴体,特别是红轴和茶轴的对比。同时还介绍了U盘安装Linux镜像的步骤,以及在Linux系统中安装软件的命令行操作。此外,还介绍了nodejs和npm的安装方法,以及在VSCode中安装和配置常用插件的方法。最后,还介绍了如何在GitHub上配置SSH密钥和git的基本配置。 ... [详细]
  • 本文介绍了使用Rust语言编写、保存和编译程序的简单步骤。首先,打开记事本文件并编写程序代码,然后将代码保存到一个以.rs为扩展名的文件中。接下来,使用rustc命令来编译运行程序。最后,通过命令行运行编译后的程序,得到输出结果。如果遇到编译错误,可以下载Build Tools for Visual Studio 2017来解决。 ... [详细]
  • Introduction(简介)Forbeingapowerfulobject-orientedprogramminglanguage,Cisuseda ... [详细]
  • css div中文字位置_超赞的 CSS 阴影技巧与细节
    本文的题目是CSS阴影技巧与细节。CSS阴影,却不一定是box-shadow与filter:drop-shadow,为啥?因为使用其他属性 ... [详细]
  • Windows 11 Insider Preview Build 22621.730/22623.730(KB5017385)发布!
    今天微软官方将Windows11InsiderPreviewBuild22621.730和Build22623.730(KB5017385)发布到Bet ... [详细]
  • 起首须要装置插件:sass-resources-loadernpmisass-resources-loader--save-devscss:修正vue-cli的buildutils ... [详细]
  • 编译sass,遇到报错error style.scss (Line 3: Invalid GBK character
    今天学习sass,写了一行中文注释,结果却遇到了报错:1cmd.exeDCcallC:Ruby23-x64binscss.bat--no-cache--update ... [详细]
  • 原因:增加配置:webpack.base.conf.jsloaders:{scss:[vue-style-loader,css,sass].join(! ... [详细]
  • ruby环境中自动编译sass教程
    ruby环境中自动编译sass教程-sass为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护!sass安装安装完ruby之后,在开始菜单中,找到 ... [详细]
  • 简介quickly-css是一个快速书写CSS样式的类库,项目采用scss,gulp构建,quickly-css方便了我们日常开发重复书写css的烦恼,它类似于bootstrap但 ... [详细]
author-avatar
sunhuan
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有