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. PyQt(Python+Qt)学习随笔:Qt Designer中QAbstractButton派生按钮部件的icon属性和iconSize属性

    icon属性 icon属性保存按钮上展示的图标,图标的缺省大小由图形界面的样式决定,但可以通过 iconSize 属性进行调整. 图标的几种子属性状态的含义与QWidget的windowIcon属性相 ...

  2. sqlite 数据库与mysql 数据库使用区别记录

    遇到了就记点儿. 1.sqlite 中,设置外键关联,没啥用.只有mysql 中可用.

  3. [BJDCTF2020]Cookie is so stable && [GWCTF 2019]枯燥的抽奖

    [BJDCTF2020]Cookie is so stable 进入环境后看到有hint,点击之后查看源代码 提示我们cookie有线索 flag页面是: 需要输入一个username,或许这道题目是 ...

  4. Markdown 公式指导手册

    本文为 Markdown 环境下的常用语法指引.Typora 编辑阅读器支持 \(\LaTeX\) 编辑显示支持,例如:\(\sum_{i=1}^n a_i=0\),访问 MathJax 以参考更多使 ...

  5. 关于Android手机CPU不同架构的问题

    1.共有7种架构 armeabiv-v7a: 第7代及以上的 ARM 处理器.2011年15月以后的生产的大部分Android设备都使用它. arm64-v8a: 第8代.64位ARM处理器,很少设备 ...

  6. airtest数据线连接手机

    1.用USB数据将手机和电脑进行连接,手机打开开发者模式,并且开启USB调试   2.下载adb调试:只是用户检查有没有设备连接,不下载也行,但是最好下载 使用方法:解压 方法一:使用cmd命令进入解 ...

  7. STL—— 容器(vector)的各种功能方法

    1. 获取容器的元素个数 size() 使用 vectorName.size() 可以输出这个容器中类型的个数,如下代码: 1 #include <iostream> 2 #include ...

  8. 云小课 | 需求任务还未分解,该咋整!项目管理Scrum项目工作分解的心酸谁能知?

    温馨提醒:本文约3000字,需要阅读5分钟,共分为8个部分,建议分段阅读! 软件开发过程中,从产品概念形成到产品规划.往往要做详细的需求分析和项目规划等,因此,选对一款项目管理工具对开发者就显得尤为重 ...

  9. Django Uwsgi Nginx 部署

    1.django的settings配置 参照博客 https://www.cnblogs.com/xiaonq/p/8932266.html # 1.修改配置 # 正式上线关闭调试模式, 不会暴露服务 ...

  10. 如何用Python 制作词云-对1000首古诗做词云分析

    公号:码农充电站pro 主页:https://codeshellme.github.io 今天来介绍一下如何使用 Python 制作词云. 词云又叫文字云,它可以统计文本中频率较高的词,并将这些词可视 ...