vscode各插件使用-背景图-scss

一、自定义背景图

1、下载插件background

2、左下角设置--搜索--settings.json设置配置文件

"background.customImages": [
        "file:///Users/用户名/Pictures/IMG_6897.JPG",//图片地址  mac  window:"c/用户名/XXX"
        "file:///Users/用户名/Pictures/IMG_6897.JPG",
    ],
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",//图片自定义位置
        // "z-index": "1",  //可有可无
        "width": "100%",
        "height": "100%",
        "background-position": "10% 0",
        "background-repeat": "no-repeat",
        "background-size":"cover",
        "opacity": 0.1,   //必须设置为1以下，若为1 任何页面打开均为设置图片
    },
    "background.useFront": true,
    "background.useDefault": false,//是否使用默认图片

3、重启即可

 

二、将scss自动转成css

1、下载easy sass文件

2、文件--》首选项---》设置--》用户(全局应用，工作区：当前应用)--》右上角打开当前代码settings.js  

3、设置文件，保存，重启即可

"easysass.formats": [ //** Easy Sass 插件 **/
        {
            "format": "compressed", // 压缩
            "extension": ".css"
        }
    ],
    "easysass.targetDir": "", // 自定义css输出文件路径 当前目录下

4、修改sass文件保存，生成两份css，当前目录为压缩文件，dist/css为正常文件

ts:配套安装

Live Sass Compilerritwickdey.live-sass 插件否则以上只生成一份未压缩css文件