scss2css vscode设置_VSCode下让CSS文件完美支持SCSS或SASS语法方法
VSCode下让CSS文件完美支持SCSS或SASS语法方法
习惯Webpack + PostCSS后, 通常PostCSS都是直接对CSS文件进行处理, 但是大部分习惯SCSS/SASS/LESS的朋友也许不适应了. 我专门研究了一下, 在Visual Studio Code编辑器下如果配置相关代码和设置达到CSS文件完美编写SCSS的办法, 其他语法类型原理相似, 这里以SCSS为例.
开始配置
Visual Studio Code编辑器设置的配置
首先, 配置编辑器的设置, 按快捷键"CTRL + ,"打开用户设置, 添加如下配置片段:
"files.associations": {
"*.css": "scss"
}
我这里做了全局的用户设置, 因为我个人大部分情况下是写SCSS, 当然如果你仅对该项目配置, 也可以将上面这段放进工作区设置(是放在默认花括号内哦, 千万不要弄错了~).
这样, VSCode编辑器就会把所有CSS文件当成SCSS格式来解析了, 也就不会出现可怕的红色波浪线了.
PostCSS的配置
接下来, 对PostCSS进行相关配置. 我们这里需要安装最重要的两个PostCSS插件postcss-scss和precss. 执行命令:
npm i -D postcss-scss precss
安装好后, 修改项目的postcss.config.js配置如下(我另外有用到autoprefixer和cssnano, 当然你可以根据个人情况选择, 重要部分是parser: 'postcss-scss'和require('precss')):
module.exports = {
parser: 'postcss-scss',
plugins: [
require('precss'),
require('autoprefixer'),
require('cssnano')
]
}
这样问题就解决了. 试着编译一下以下测试代码:
/* css文件用scss语法测试 */
$blue: #056ef0;
.test {
display: flex; // 这是scss注释
color: $blue;
.box {
flex: 1;
}
}
编译后:
.test{display:-webkit-box;display:-ms-flexbox;display:flex;color:#056ef0}.test .box{-webkit-box-flex:1;-ms-flex:1;flex:1}
Tips: 我用了cssnano, 因此注释被自动去除, 如果需要保留, 需参阅cssnano文档进行相关配置.
结语
至此, 我们的编辑器和项目都对CSS文件下编写SCSS有了很好的兼容. 至于其他用SASS和LESS的朋友可以举一反三, 安装对应的插件和修改VSCode设置. 整个操作过程应该花不了十分钟, 以后就能愉快的在CSS文件上面写SCSS啦~ 关于本次测试的代码可以访问postcss study查看.
如果文中有误, 或者还有什么疑问欢迎留言~
题外
postcss-scss插件到底做了什么? 据我观察, 行注释会被转换成标准的CSS块注释, 而其他的作用还尚未理解, 下面是官方描述:
This module does not compile SCSS. It simply parses mixins as custom at-rules & variables as properties, so that PostCSS plugins can then transform SCSS source code alongside CSS.
关于Webpack + PostCSS环境如何搭建的, 需要哪些依赖包, 大家可以直接看我的前文提到过的DEMO项目
关于PostCSS我也才用不到一年, 感觉确实很方便, 几乎可以替代SCSS了, 比如, 以前做项目需要引入第三方插件CSS, 而自己用的是SCSS, 那么Webpack解析就需要两个规则匹配. PostCSS的插件也是非常的丰富, 经过几年的发展, 很多插件为开发工作带来很好的便利. 例如移动端适配的px转rem单位的插件postcss-pxtorem, 我这里也有个完整的DEMO, 提供给大家参考~
scss2css vscode设置_VSCode下让CSS文件完美支持SCSS或SASS语法方法相关推荐
- VSCode设置隐藏固定后缀名文件
前言 在用Angular CLI构建工程时,每次创建组件.服务等都会带有.spec.ts结尾的文件,这是用来单元测试用的.在平时构建工程时作用不大,在VSCode中显得非常繁琐. 在VSCode中设置 ...
- linux下打包deb文件,制作deb包的三种方法
制作deb包的三种方法 发布时间:2008-06-10 16:05:39来源:红联作者:Mhynan 我所知道的制作deb包有三种方法,一种是将现有的文件打包,安装该包就像将打包的文件释放到某个目录: ...
- SpringBoot----项目中无法访问webapp下面的WEB-INF文件夹中的jsp页面解决方法
踩坑总结: 1.先贴出目录结构 2.访问WEB-INF文件夹中的jsp页面一直提示:JSP file [WEB-INF/views/hello.jsp] not found,如下图: 3.页面没法找到 ...
- 【完美解决 】 -VsCode设置了字体,但是中文字体仍然是宋体 的解决方法
原因 : VsCode 只支持等宽字体 ,所以好多字体都不能用 解决方法 // 注意这里设置之后 中文字体显示就OK了"editor.fontFamily": "Cons ...
- 当前安全设置不允许下载该文件 完美解决方案
本贴是杭州电脑维修专家私藏技术,如果你觉得本贴好,请回一下贴哦,如果不能解决,请在后面跟帖写出,我们一定想办法解决. 方法如下: 你到浏览器-->工具-->internet选项---> ...
- windows下gvim的配置完美支持中文和UTF-8
转自http://blog.chinaunix.net/uid-1700951-id-2838094.html "打开行号 set nu! "自动折行 set wrap " ...
- 群晖搭建Blynk服务器 可开外网及改Mixly文件完美支持教程
最近研究一下群晖系统,发现群会有容器DOCKER然后找到了Blynk服务器,下载安装研究了一番.结果很满意.这么好的功能不敢独享.特拿出来与大家分享.用低功耗(13W)的主机做群晖nas还可以做物联网 ...
- Windows下安装goaccess,并支持显示中文页面的方法
最近在研究nginx日志分析的功能,百度资料很多,经过大量研究.尝试.排坑,最后终于如愿以偿实现了该功能,下面分享一下经验以供大家参考! 注:有尝试过用cowaxess_1.6.0_x64_insta ...
- php css下划线,css下划线与文字之间的距离如何设置?
本篇文章给大家介绍一下css下划线和文字间距离的的设置方法,接下来我们来看看具体的内容. 在上一篇文章中我们介绍了关于css下划线的设置方法,但是设置出来的下划线感觉与文字之间距离太近,有时在网页中会 ...
最新文章
- 两帧点云刚性配准的ICP算法
- HQL语句中数据类型转换,及hibernate中createQuery执行hql报错
- 操作分布式文件之六:如何解析远程文件
- VMProtect SDK+ASProtect SDK保护
- 访问Mysql数据库,连接字符串配置
- 学会这21条,你离 Vim 大神就不远了!
- 2017 Multi-University Training Contest - Team 5:1001. Rikka with Candies(手写bitset)
- 计算机安装系统说明,电脑操作系统安装方法-详细图解说明-简单安装Windows系统...
- 电路设计基础知识(一)[转]
- Sofa memcached client
- 草稿 22.10.10 !!!!!! YUYU
- 男童跌入水渠被冲出千米 不会游泳女子将其救起
- Ubuntu14.04+Texlive2014+LYX-Linux下LYX的中文配置方案
- 使用 vue 开发 APICloud 应用的教程
- 5.7.1 使用向导创建交叉表查询
- 计算机组成与原理课程视频在线,《电子科技大学计算机组成原理视频课程42讲全 》...
- 手动挡五个档位示意图_手动挡车档位介绍,手动挡挡位示意图
- 纯js实现点击预览图片效果
- JavaScript入门教学
- 农村人为何出来打工却不在家搞养殖?
热门文章
- Linux系统解决网络问题的笔记
- chart.js 饼图显示百分比_实战PyQt5: 135-数据可视化之QChart绘制饼图
- python数据可视化源码_Python数据分析:基于Plotly的动态可视化绘图 随书源码[101MB]...
- 【LeetCode】整数反转
- 去贵阳参观大数据到哪参观_您必须参观的四个世界
- 又一个基于 Esbuild 的神器!esno
- upc 组队赛18 STRENGTH【贪心模拟】
- 数据结构与算法学习笔记之 从0编号的数组
- 基于间隔推送全量更新数据状态的设计方法
- 图文详解cacti的安装和使用