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. 第15.3节 PyCharm程序调试功能介绍

    一. 代码调试 点击工具栏的调试按钮(如下图蓝色圈标记按钮)可以进行程序调试,可以在调试前先设置断点,断点设置就是在打开文件的行与前面的行号之间用鼠标单击进行设置和取消(如下图蓝色下划线上面的实体圆点 ...

  2. redis学习之——Redis事务(transactions)

    Redis事务:可以一次执行多个命令,本质是一组命令的集合.一个事务中的,所有命令都会序列化,按顺序地串行化执行而不会被其它命令插入,不许加塞. 常用命令:MULTI  开启事务  EXEC 提交事务 ...

  3. 定制iview选择器——全选按钮

    源码下载:https://github.com/littleOneYuan/c_select 本文索引 效果 template data prop methods watch created 效果 下 ...

  4. oracle 11.2.0.4下载

    Oracle 11.2.0.4下载地址 Linux x86: https://updates.oracle.com/Orion/Services/download/p13390677_112040_L ...

  5. springmvc使用路径变量后再进行页面跳转会出现路径错误问题

    学习<Servlet.JSP和SpringMVC学习指南>遇到的一个问题,记录下. 项目代码 现象 @RequestMapping(value = "/book_edit/{id ...

  6. Spring MVC例子

    学习Spring MVC的一个例子,参考书籍<Servlet.JSP.Spring MVC学习指南>,简单总结一下. 代码下载:https://github.com/PeiranZhang ...

  7. js上 四、数据类型转换

    1. 转布尔类型 Boolean():可以将任意类型的数据转为布尔类型: 语法:Boolean(值) 规则:

  8. [日常摸鱼]POJ2187 BeautyContest-旋转卡壳

    原来这个念 旋转卡qia壳ke- 题意:求平面内给定点集里的最远点对,$n \leq 5e4$ 做法就是旋转卡壳啦,话说这题数据范围应该可以再大挺多的. #include<cstdio> ...

  9. Angular *ngIf length

    Angular *ngIf length 在Angular中如何判断*ngIf Arrary的长度? 具体代码如下: result = []; <div class="kt-secti ...

  10. Autofac的基本使用---1、前言

    Autofac的基本使用---目录 代码地址 https://github.com/catbiscuit/AutofacStudy 参考网上的大神,原博文地址 https://www.cnblogs. ...