1、先在VSCode上面安装插件:Live Sass Compiler

2、创建好scss文件夹文件和css文件夹

3、然后在VSCode的控制台上打开Live sass watching模式(控制台的打开方式为:Ctrl+Shift+p)就可以编译scss代码了,开启sass watching之后可以实时更新css文件

4、最后在VSCode的配置里修改css文件的输出目录

配置css文件的输出目录

先在设置里面找到liveSassCompile.settings.formats修改里面的默认配置项,并复制

然后在setting.json里面加入

{
    "workbench.iconTheme": "vscode-icons",
    "vsicons.dontShowNewVersionMessage": true,
    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
    "workbench.startupEditor": "newUntitledFile",
    "liveSassCompile.settings.formats": [
        {
          "format": "expanded",
          "extensionName": ".css",
          "savePath": "~/../css"
        }
      ]
}

"savePath": "~/../css"就是css文件输出的路径

如果vscode里面没有 "liveSassCompile.settings.formats"的配置项,可以直接复制上面的代码到sass的配置文件中;

设置完成后就可以使用scss了

在vscode中配置sass savepath的更多相关文章

  1. 【已解决】React中配置Sass引入.scss文件无效

    React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules ...

  2. 在webstorm中配置sass的自动编译,并且可以指定编译后的css的目录.

    参考: WebStorm-2018.2-Help-Sass, Less, and SCSS 作者:tobyDing链接:https://www.jianshu.com/p/0fe52f149cab來源 ...

  3. vscode中配置php的xdebug

    vscode中配置php的xdebug vscode配置php的xdebug,步骤如下: 1. 安装phpdebug插件: PHP Debug 2.网上下载php的xdebug扩展(注意根据自己的ph ...

  4. 在VSCode中配置Eslint格式化

    在VSCode中配置Eslint 格式化时使代码保持Eslint语法规范 安装Eslint以及prettier美化插件 在VSCode配置设置项中添加如下代码 { "workbench.co ...

  5. create-react-app脚手架中配置sass

    本文介绍如何在react中配置sass 首先将你的文件名称改成scss结尾的文件 然后安装依赖 cnpm install sass-loader node-sass --save-dev 找到node ...

  6. vscode中配置git

    vscode中配置git vscode 报错 未找到Git.请安装Git,或在"git.path" 设置中配置 第一步安装git git安装方法自行解决,提供git下载连接! gi ...

  7. React中配置Sass引入.scss文件无效

    React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules文 ...

  8. VScode中配置C++运行环境

    目录 VScode中配置C++运行环境 1. 哪些插件 2. 配置开始 3. 编写代码并运行 VScode中配置C++运行环境 关于安装mingw的教程,网络上已经有很多了,这里不再赘述,下面就看VS ...

  9. STC8H开发(二): 在Linux VSCode中配置和使用FwLib_STC8封装库(图文详解)

    目录 STC8H开发(一): 在Keil5中配置和使用FwLib_STC8封装库(图文详解) STC8H开发(二): 在Linux VSCode中配置和使用FwLib_STC8封装库(图文详解) 前面 ...

随机推荐

  1. 深海 => 暴力扫描挖掘机

    平时总是联动这个联动那个,写一些小脚本,感觉零碎又没啥意思,想把市面上一些比较知名的工具集合一下,弄个方便点的躺着挖洞的工具,看看效果会不会更好,暂时名字取深海吧,估计又是一个迟迟不填的坑,灌灌灌灌水

  2. 凌乱的与ctf无关的小知识点

    (1)在网页中一般不要用记住密码.否则想要知道你的密码很简单. 例子:看样子很安全,别人无法通过这些来获得你的其他密码(尤其是想我这样密码强度不高的人),但是知道要修改前端的选项,你的密码就会被暴露. ...

  3. 【转载—“光荣之路”公众号】Bug预防体系(上千bug分析后总结的最佳实践)

    web常见产品问题及预防 测试人员在每次版本迭代中,会对项目的整体质量有一个把控,对于项目常见的问题,开发经常犯的错误都会有所了解,为了避免或者减少这样的错误或不规范的事情再发生,测试人员可以整理构建 ...

  4. Aap.Net中的Action和Func委托

    前言 最近在阅读某开源框架源码的时候,发现作者在其中运用了很多Action委托和Func委托,虽然我之前在项目中也有一些对委托的实操,但还是免不了长时间的不用,当初消化的一些委托基础都遗忘了...索性 ...

  5. H5相关知识点整理

    01-HTML5基础 了解HTML5 ☞HTML5属于上一代HTML的新迭代语言,设计HTML5最主要的目的是为了在移动设备上支持多媒体!!! 例如: video 标签和 audio 及 canvas ...

  6. 题解-CF1139D Steps to One

    题面 CF1139D Steps to One 一个数列,每次随机选一个 \([1,m]\) 之间的数加在数列末尾,数列中所有数的 \(\gcd=1\) 时停止,求期望长度 \(\bmod 10^9+ ...

  7. Day5 - 02 定义函数

    定义函数    Python中定义函数要使用def语句.     依次写出函数名.括号.括号中的参数和冒号,在缩进块中编写函数体,通过return语句返回函数返回值.如:                ...

  8. .net core WebAPI性能监控-MiniProfiler与Swagger集成

    ------------恢复内容开始------------ 安装Nuget Install-Package MiniProfiler.AspNetCore.Mvc Install-Package M ...

  9. docker 批量删除已经停止的容器

    长期操作导致大量的容器堆积,如何对这些没有用的容器进行批量删除: 命令如下 : Docker rm `docker ps -a |awk '{print $1}' | grep [0-9a-z]`

  10. 【原创】WPF TreeView带连接线样式的优化(WinFrom风格)

    一.前言 之前查找WPF相关资料的时候,发现国外网站有一个TreeView控件的样式,是WinFrom风格的,样式如下,文章链接:https://www.codeproject.com/tips/67 ...