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. python 读取excel表格内不同类型的数据

    不同类型数据对应值: #coding=utf-8 import os import xlrd from datetime import datetime,date newparh = os.chdir ...

  2. 团队项目6——Alpha阶段项目复审

    复审团队 广东靓仔六强选手 复审员 钟俊豪(3118005122) 复审内容 小组名称和链接 优点 缺点&Bug报告 最终排名 代码敲不队https://www.cnblogs.com/pip ...

  3. CF1400G - Mercenaries

    1400G - Mercenaries 考场上想到枚举,但是只想到了 \(2 ^ m\) 枚举矛盾,然后用 NOI Online 2 游戏 类似的容斥掉,结果式子推着推着就复杂度爆了 wtcl. (U ...

  4. SpringBoot使用Mybatis-plus及分页功能的细节部分

    pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  5. 傲视Kubernetes(二):Docker镜像搭建与本地Kubernetes环境搭建

    主要内容: 1.Docker与Kubernetes的关系 2.SpringBoot微服务的Docker镜像创建 3.Kubernetes本地环境搭建 一.Docker与Kubernetes的关系 在说 ...

  6. 免费部署个人博客到远端GitHub

    前言 前面的博客我写到怎么样用hexo建立一个自己的博客网站(没看的可以先看前面那个文章地址,)但是它只能运行在本地端口,如果你分享给你的小伙伴他们是打不开的.如果把它部署到服务器上或空间上每个月都会 ...

  7. swiper4使用教程-填坑

    本篇博客用于记录使用swiper插件中的一些关键点: 首先附上官网地址:https://www.swiper.com.cn/ ios中使用swiper的坑: /*解决swiper中苹果点击变暗,在cs ...

  8. JavaSE14-集合·其一

    1.Collection集合 1.1 集合体系结构 集合 (接口)Collection:单列 (接口)List:可重复 (实现类)ArrayList (实现类)LinkedList (接口)Set:不 ...

  9. Android studio使用OKGO的POST请求访问http失败的解决方法

    前几天在旧手机(版本是Android7)上调试一个app,用OKGO的post请求连接服务器登录一直很正常.今天旧手机不在身边,用自己的手机调试,就出现网络请求失败的问题,弹onError()里自己写 ...

  10. 登录linux时 shell执行顺序

    # .bash_history,.bash_logout,.bash_profile,.bashrc/etc/profile 全局.bash_history 记录当前登录用户历史操作的命令.bash_ ...