使CSS文件在VSCode下完美支持SCSS或SASS语法在习惯了Webpack+PostCSS后，PostCSS通常会直接处理CSS文件，但大部分习惯了SCSS/SASS/LESS的朋友可能不太习惯。我专门研究过，如果在VisualStudioCode编辑器中配置相关代码和设置，就可以实现在CSS文件中完美写入SCSS的方法，其他语法类型的原理都是类似的。这里我们以SCSS为例。开始配置VisualStudioCode编辑器设置的配置。首先配置编辑器设置，按快捷键“CTRL+”打开用户设置，添加如下配置片段：这里设置，因为我个人有些情况下，是写SCSS的。当然，如果你只配置项目，也可以将上面这段话放到工作区设置中（默认是放在花括号里的，不要弄错了~）。这样，VSCode编辑器浏览器就会把所有的CSS文件解析为SCSS格式，就不会出现吓人的红色波浪线了。PostCSS配置接下来，配置PostCSS。我们需要安装两个最重要的PostCSS插件postcss-scss和precss。执行命令：npmi-Dpostcss-scss安装好precss后，修改项目的postcss.config.js配置如下（我也用autoprefixer和cssnano，当然你可以根据个人情况选择，重要的部分是解析器：'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}小贴士：我使用了cssn??ano，所以注释自动去掉了。如果需要保留，需要参考cssnano文档进行相关配置。结论到目前为止，我们的编辑器和项目都非常兼容在CSS文件下编写SCSS。至于其他使用SASS和LESS的朋友可以举一反三，安装相应的插件，修改VSCode设置即可。整个操作过程应该不到十分钟，以后可以愉快的在CSS文件上写SCSS了~可以访问postcssstudy查看本次测试的代码。如果文章有错误，或者大家有什么问题，欢迎留言~题外话，如果有人不是很清楚SCSS和Sass的区别，可以阅读IntrotoSCSSforSassUserspostcss-scsspostcss-scss插件究竟做了什么？根据我的观察，行注释会转换为标准的CSS块注释，其他功能暂时还没有了解。以下为官方说明：本模块不编译SCSS。它只是将mixins解析为自定义规则，将变量解析为属性，这样PostCSS插件就可以将SCSS源代码与CSS一起转换。关于如何搭建Webpack+PostCSS环境，需要哪些依赖，可以直接参考我上一篇文章中提到的DEMO工程。我使用PostCSS还不到一年。感觉真的很方便，几乎可以代替SCSS，比如以前项目需要引入第三方插件CSS，但是你用的是SCSS，那么Webpack解析就需要两条规则来匹配。PostCSS插件也很丰富。经过几年的发展，开发了很多插件，为工作带来了极大的方便。比如适配移动端px转rem单位的插件postcss-pxtorem，我这里也有完整的DEMO，供大家参考~
