VSCode 配置 scss 转 css 和 less 转 css

一、scss 转 css

1、当前工作区配置

（1）、安装 Easy Sass

（2）、配置 Easy Sass

第一步：如下图代开设置（也可以：ctrl+, 快捷键打开设置，或者在 文件 > 首选项 > 设置）

第二步：选择工作区

第三步：在 setting 文件中，输入以下代码：

{
  /** Easy Sass 插件 **/
  "easysass.formats": [
    {//nested：嵌套缩进的 css 代码。//expanded：没有缩进的、扩展的css代码。//compact：简洁格式的 css 代码。//compressed：压缩后的 css 代码
      "format": "compressed", // 压缩
      "extension": ".css"
    }
  ],
  "easysass.targetDir": "css/" // 自定义css输出文件路径
}

ok!

2、全局配置

如果需要全局配置，在第二步设置的时候 选择“用户”而非“工作区”，然后将代码复制到用户设置的文件中即可。

 

二、less 转 css

1、当前工作区配置

（1）、安装 Easy Sass

 

（2）、配置 Easy Sass

第一步：如下图代开设置（也可以：ctrl+, 快捷键打开设置，或者在 文件 > 首选项 > 设置）

第二步：选择工作区

第三步：在 setting 文件中，输入以下代码：

{   
    /* Easy Less 插件 */
    "less.compile": {
        "out": "${workspaceRoot}\\css\\"
    }
}

2、全局配置

如果需要全局配置，在第二步设置的时候 选择“用户”而非“工作区”，然后将代码复制到用户设置的文件中即可。

 

三、弊端

会自动生成很多 dist 文件，打包的时候，可以在 .gitignore 文件中屏蔽掉。

【拓展】

不需要从头写.gitignore文件，GitHub已经为我们准备了各种配置文件，只需要组合一下就可以使用了。所有配置文件可以直接在线浏览：https://github.com/github/gitignore

忽略文件的原则是：

• 忽略操作系统自动生成的文件，比如缩略图等；
• 忽略编译生成的中间文件、可执行文件等，也就是如果一个文件是通过另一个文件自动生成的，那自动生成的文件就没必要放进版本库，比如Java编译产生的.class文件；
• 忽略你自己的带有敏感信息的配置文件，比如存放口令的配置文件。

                                                                                                        ----引自 廖雪峰的官方网站