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查看.

若是文中有误, 或者还有什么疑问欢迎留言~

题外

• 若是有人还不是很清楚SCSS和Sass的区别能够阅读Intro to SCSS for Sass Users

• 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, 提供给你们参考~