What to do if vscode sass compilation error occurs

What should I do if I get an error when compiling vscode sass?

Use vscode to compile sass

If you want to compile through the command line, you can follow https://www.sass.hk/ Go here and follow the steps Installation, but there was a problem when installing the Taobao image and the installation was unsuccessful, so I used vscode to compile sass

Recommended learning: vscode tutorial

First Step 1, install easy sass in vscode. The picture below shows the successful installation status

Step 2, modify the configuration of vscode

"easysass.compileAfterSave": true, 
 "easysass.formats": [ //nested：嵌套缩进的 css 代码。
//expanded：没有缩进的、扩展的css代码。
//compact：简洁格式的 css 代码。
//compressed：压缩后的 css 代码
        {
            "format": "expanded",
            "extension": ".css"
        },
        {
            "format": "compressed",
            "extension": ".min.css"
        }
    ],
    "easysass.targetDir": "css/" //路径

The third step is to create a new folder and create two new folders in the folder, one for sass and one for css. If you do not create a css folder, a folder will be automatically created after compilation

The fourth step, then create demo.sass under sass, and then write

.box
    color: red
    .img
        width: 100%;
        display: block;

The fifth step, press ctrl s, it will be compiled directly, because you In the previous setting, easysass.compileAfterSave was set to true, so it will be compiled once after saving. This is also to improve development efficiency

Finally, you will find that there is an additional css file and a min.css file under the css. This has something to do with the settings you have set, one without indentation and one with compression

That’s it...

The above is the detailed content of What to do if vscode sass compilation error occurs. For more information, please follow other related articles on the PHP Chinese website!