visual studio代码html css javascript程序未正确显示在我的浏览器中

如何解决visual studio代码html css javascript程序未正确显示在我的浏览器中

我正在使用该教程系列：https://www.youtube.com/watch?v=7WaohfclZRs（链接是该系列的第三段视频，我已经与第一，第二段视频一起编程了）

现在，我已经安装了Visual Studio Code，并安装了所有扩展，例如“ Live Server”以及所有其他内容。我已经与本教程一起编码。但是，当我单击index.html文件中的“使用Live Server打开”时，它仅打开html文件。我已经对main.scss和_config.scss文件进行了编码。所以我在那里编码的所有内容都不会出现。

我的意思是，这应该合乎逻辑：当我单击index.html以“用Live Server打开”时，它仅在我的浏览器中运行该html文件，而不使用scss运行任何文件...但是我不知道什么我应该这样做，以便在浏览器中也可以执行main.scss文件和_config.scss文件。

我该怎么办？

从2020年8月28日开始编辑： 因此，我尝试了您告诉我的内容，但仍然无法使用。

This is what my Visual Studio Code looks like

This is what I see when I open it with the extention "Sass Live Compiler,e.g. when I click on Watch Sass down there and then on go Live

This is what it looks like when I open it with a right click on index.html and click on "Open with Live Server"

我已经检查了node.js和Visual Studio是否正确安装。我不知道该怎么办。

解决方法

我不确定这是否是错误，但是也许您没有像评论中所述编译sass文件。 Saas文件无法在浏览器中运行，只能在CSS文件中运行。

要在VScode中编译sass或scss文件，我建议使用一个名为Live Saas Compiler的扩展程序，该扩展程序将编译sass文件并生成一个css文件。