vscode 配置 sass全局变量和编译风格

vscode 设置

• 首先需要安装 easysass 这个插件
• 如下打开设置
  
• 将下面的代码复制进去（也可以按照自己的需求调整）

{
    /** Easy Sass 插件 **/
    "easysass.compileAfterSave": true,  // 保存后是否自动编译
    "easysass.excludeRegex": "_",  // 配置忽略编译的文件格式 eg：_variable.scss
    "easysass.formats": [
        {
            "format": "compact",  // 简洁格式的 css 代码(代码风格)
            "extension": ".min.css"
        }
    ],
    "easysass.targetDir": "./src/assets/styles/css"  // 自定义css输出文件路径（相对于根目录）
 }

• 在vue.config.js 中输入以下内容：

module.exports = {
    // ...
    css: {
      loaderOptions: {
        sass: {
          data: `
            @import "@/assets/styles/sass/_variable.scss";
          `
        }
      }
    }
  }

效果图