Fixing vscode scss linting "errors" on front matter


If you override the CSS on a theme (eg Minima) it requires that you create a file /assets/main.scss and in that file you need to include front matter. eg:


@import "{{ site.theme }}";
body {

Unfortunately, when using VSCode, the scss linter complains about the front matter:
[scss] at-rule or selector expected

This does not stop the file from being used in Jekyll but the red error is annoying in VSCode and masks other real errors in your project.

To fix this:

  1. In VSCode, add your /assets folder as a Workspace folder (right click in the Explorer > Add Folder to Workspace. In VSCode you can have “nested” workspace folders.
  2. Go to Preferences > Settings. On the Settings page there are three levels of settings : User Settings, Workspace Settings and Folder Settings. Click the tab for Folder Settings.
  3. In the drop down on the Folder Settings tab header, select your assets folder.
  4. Add your setting:
    “scss.validate”: false

This turns off scss linting for just the assets folder and the error should go away. Yes, you lose linting so you will need to check your code yourself! :wink: