VS Code CSS Configuration Preview Not Working With Markdown Workspace Settings

Question

Issue

CSS styling is not displaying in the the VS Code preview for Markdown files despite being configured under the Workspace Settings per the VS Code documentation Extending the Markdown preview .

Expected

Here is how the published Markdown file media.md displays when being hosted.

Note: Green border added to highlight Markdown code.

Result

Here is how the Markdown file media.md displays in the VS Code preview.

Note: Green border added to highlight Markdown code.

Setup

Workspace Structure

The Markdown file attempting to be styled with assets/css/style.scss is media.md .

Workspace Settings

This is configured under Workspace Settings as opposed to User Settings .

{
    "markdown.styles": [
        "assets/css/style.scss"
    ]
}

Answer 1

It looks like the "markdown.styles": [] setting of VSC is particularly for CSS, not SCSS.

You can use Sass to process your *.scss into *.css files that the VSC Markdown preview will be able to understand.

From the looks of it, though, it seems you're working on a Jekyll site (I see a _config.yml Jekyll configuration file). In that case, serving your Jekyll site locally to preview changes may be a better option.

---

PS it would be easier to parse your question if the Markdown screenshots had a border around them to better differentiate between them and the details of the question itself :)