20190423-Vscode与Sass不得不说的秘密(>^ω^<)
这是乱七八糟的前言:emmm,今天倔强的点,是关于Vscode使用easySass插件时,不安装ruby环境,直接使用插件编译时,不进行设置,分音是会转译为Css文件的= =,神坑的后知后觉才发现是因为插件的问题,搞了近俩小时不止~
目录
1、easySass插件的默认用户设置
1.1文件》首选项》设置》settings.json全局配置文件
1.2默认用户设置
"easysass.compileAfterSave": true,
//保存scss/sass文件后自动编译
"easysass.excludeRegex": "",
//提供文件名正则表达式,匹配到的文件会被排除,不会编译为css,默认为空,则功能关闭
"easysass.formats": [
{
"format": "expanded",
"extension": ".css"
},
{
"format": "compressed",
"extension": ".min.css"
}
],
//编译不同风格的css
1.easysass.formats[i]format用以编译生成对应风格的css,参数值
nested:嵌套缩进的 css 代码。
expanded:没有缩进的、扩展的css代码。
compact:简洁格式的 css 代码。
compressed:压缩后的 css 代码。
2.easysass.formats[i]extension用以设置编译输出的文件拓展名
此处可以自定义文件名,输出的 css 文件名会按照“当前 Sass 文件名(不含拓展名)+此处自定义文件名”的格式来生成 例如:设置"easysass.formats[i].extension": ".min.css",假设当前的 Sass 文件名为 style.scss,则编译输出的 css 文件名为 style.min.css
"easysass.targetDir": ""
很多情况下 scss/sass 文件和 css 文件是不在同一个目录下的,而 Easy Sass 默认输出的 css 是和当前 Sass 文件处于相同目录的
为此我们需要通过该参数来配置输出路径
1.3更改用户设置
2、分音导入还是需要加下划线
emmm,用VScode的easySass是不需要装ruby环境的┓( ´∀` )┏真是喜大普奔,不过,emmm分音时还是要记得更改用户设置,以及导入时千万记得加上下划线_,不然会报找不到文件夹的错误!
参考文献:
随机推荐
- APP测试要点—UI、功能测试
一.UI测试 测试用户界面(如菜单.对话框.窗口和其它可规控件)布局.风格是否满足客户要求.文字是否正确.页面是否美观.文字.图片组合是否完美.操作是否友好等. UI测试的目标是确保用户界面会通过测试 ...
- 【转】大白话讲解Promise(一)
原文地址:https://www.cnblogs.com/lvdabao/p/es6-promise-1.html ES6 Promise 先拉出来遛遛 复杂的概念先不讲,我们先简单粗暴地把Promi ...
- 第14章 纪元时间转换 - IdentityModel 中文文档(v1.0.0)
JWT令牌使用所谓的Epoch或Unix时间来表示日期/时间. IdentityModel包含用于DateTime和DateTimeOffset转换到/来自Unix时间的扩展方法: var dt = ...
- mybatis小结
mybatis是Apache的一个开源项目ibatis,后由Google管理,目前在github上.MyBatis 是支持定制化SQL.存储过程以及高级映射的优秀的持久层框架. 一.mybatis解决 ...
- revit二次开发addin文件
command命令: <?xml version="1.0" encoding="utf-8"?> <RevitAddIns> < ...
- Java开发笔记(九十)对象序列化及其读写
有些时候,开发者想把程序运行过程中的数据临时保存到文件,可是前面介绍的字符流和字节流,要么用来读写文本字符串,要么用来读写字节数组,并不能直接保存某个对象信息,因为对象里面包括成员属性和成员方法,单就 ...
- 【MQ】消息队列及常见MQ比较
一.什么是消息队列 我们可以把消息队列比作是一个存放消息的容器,当我们需要使用消息的时候可以取出消息供自己使用.消息队列是分布式系统中重要的组件,使用消息队列主要是为了通过异步处理提高系统性能和削峰. ...
- vue项目,axios请求图片接口,接口返回的是文件流的形式,如何转换成图片?
axios .get('/captcha', { params: param, responseType: 'arraybuffer' }) .then(response => { return ...
- Mac OS X中开启或关闭显示隐藏文件命令
前言:之前一直用的都是 windows 系统的电脑,刚接触 Mac ,很多功能都不熟悉,写下博客记录一下,以防以后忘记,也给后来者提供方便. 命令行方式:显示隐藏文件: defaults write ...
- android Fragment中使用Toolbar
在Activity中可以直接使用 setSupportActionBar(toolbar); 就可以重写 onCreateOptionsMenu 和 onOptionsItemSelected 方法: ...