VIsual Studio 代码 - 实时 Sass 编译器未生成。css 文件位于单独的 css 文件夹中

Question

I am trying to set the save location of my css file to its own css folder in the Live Sass Compile Config (Live Sass Compile > Settings:Formats)

I have tried setting the savePath to "/css" - After this - I tried saving my main.scss file, which is supposed to generate a css folder with a main.css file in it. However, it is just generating a main.css file in the same folder as my main.scss (which is in a scss folder).

I have tried uninstalling and reinstalling VSC but my previous settings were saved.

{
"format": "expanded", "extensionName": ".css", "savePath": "/css", "window.zoomLevel": 0, "editor.tabSize": 2, "editor.wordWrap": "off" }

The code above is all that shows in my.json file. The top 3 lines are greyed/blacked out (format to save path).

This display in my.json file is way different than what I'm finding in tutorials on this.

Answer 1

I strongly suggest you to avoid using that for sass. Use node-sass instead. It's super easy to setup and run: Just install it from command line: npm i node-sass -g And run it in the background: node-sass [entry path-to-file] [output-path-to-file] -w The -w watches for changes in your.sass or.scss file and compiles straight away!

Answer 2

In your settings.json rename the path form "\css" to "\\css"

Like this:

        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "\\css"
        }

Don't worry it's how VS Code understands file paths. Not your fault:)

Answer 3

Refresh the main css file for every change in your child scss files (ctrl+s)

Answer 4

Make sure you renamed your sass main file style.scss.

If your sass main file have underscore before name like _style.scss, your live sass compiler will not generate.css file.

So rename your main sass file from _style.scss to style.scss.