How to setup output path to compiled css files using `vscode live sass compiler extension` in windows10?

Question

I failed to run node-sass(node module), where I was able to setup path for input extensions.scss files and output files generated after compiling to dist/ folder.

Now, I am using vscode extension live sass compiler,

at bottom bar, when I clicked Watched Sass then it compiled automatically scss file to css but in same folder.

main.scss is compiled to main.css.

problem is that I wanted to create that compiled css file in other folder .i.e. in output folder ./dist/.

I have manually created main.css file in ./dist/folder.

How can I setup path to source and destination files in that extension?

Tallulah

There might be a setting inside your User Settings. Try opening the Command Palette and searching for "args". – Gwendagwendolen

there are only settings related to terminal, when I searched "args" in ` file>preference>settings>user Settings. – Tallulah

Live Sass Compiler settings doc here: github.com/ritwickdey/vscode-live-sass-compiler/blob/master/… – Wherewithal

Answer 1

I have had the same issue when I started implementing SMACSS methodology to my projects. This is the solution I have tried. hope it will help you.

Go to VScode User Settings --> Select "Live Sass Compiler Config --> add

"liveSassCompile.settings.formats": [{
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "./css"
    }]

Langbehn

Thanks Suraj for restructuring my answer. Btw I'm very new to Stackoverflow – Langbehn

Thanks. But for me, I had to go to File/Preferences/Settings then Extensions/Live Sass Compiler. I then clicked on 'Edit in settings.json' and added the settings suggested at the end. But any route to 'settings.json' will do. – Gaffer

Is it possible to change the output path for .css.map files? My problem is that I want the .scss and .css.map to be in the same folder and save the .css only on the output folder. – Lucielucien

How do u get to user settings? – Albedo

This works fine but is there a way to do this differently for different projects (settings file in project folder)? – Hunyadi

Answer 2

Go to VScode menu- file>preferences>settings>extension>live sass copile config>edit in settings.json

and paste it code >>

  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/../css/"
    }
  ]

Manisa

Answer 3

You can go to VSCode Setting.json file and add following lines after the existing configuration.

Example:

"liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/../dist/css/"
    }
  ]

Annoy

Answer 4

Open your vs.code and go to settings then search Sass and see below Live Sass Compiler click here and see right side Live Sass Compile > Settings: Formats then edit this Settings and change only your SavePath Like example below this code.

{
  "scss.format.enable": true,
  "liveSassCompile.settings.autoprefix": [


  ],
  "liveSassCompile.settings.watchOnLaunch": false,
  "liveSassCompile.settings.formats": [

    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/assets/css", // you can change this path
        "savePathReplacementPairs": null
    }
  ]
}

Perversity

Answer 5

Not sure if this will help anyone since it's been a long time it was posted but I had multiple folders opened in VSCode recently and everytime I tried to use live sass compiler it would go to the folder that was on top of the list and create the css/styles.css file(s) inside that directory.

I saw this solution on the Live Sass Compiler creators website: https://ritwickdey.github.io/vscode-live-sass-compiler/docs/faqs.html

What you do is simple, lets say you have a folder architecture like my one here. (image link)

All you have to do is make a folder named .vscode and add a settings.json file inside that folder.

Inside settings.json paste the following code:

{
"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/Parallax/css"
    },
    {
        "extensionName": ".min.css",
        "format": "compressed",
        "savePath": "/Parallax/dist/css"
    }
],

"liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
]

}

Notice how my liveSassCompile.settings.formats is formatted: I've written the save paths as /Parallax/css/ and /Parallax/dist/css. This goes to the project root and saves the css files inside the folders called css and dist which are inside the Parallax directory. (image link)

In conclusion each time you want to change the save path all you have to do is modify the settings.json file inside the .vscode folder rather than modifying the user settings which is tedious in my opinion.

Final structure should look like this once you edited the main.scss file.

Civilization

Answer 6

Go to live SassCompiler extension settings and enter below code setting in JSON file and save.

    "liveSassCompile.settings.autoprefix": [],
"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../dist/css/"
    }

Hankow

Answer 7

Inside your Project Create a (.vscode) Directory. In the .vscode folder create a json file named settings.json. Inside of the settings.json, type the following key-value pairs. By the way you'll get intelli-sense. I hope this will work

{
 "liveSassCompile.settings.formats":[
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/css"
    },
    {
        "extensionName": ".min.css",
        "format": "compressed",
        "savePath": "/dist/css"
    }
],
"liveSassCompile.settings.excludeList": [
   "**/node_modules/**",
   ".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
]
}

Dodgem

Answer 8

None of above methods worked for me until I used the code below in the settings.json.

    {

"liveSassCompile.settings.formats": [
  {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "~/../../css/"     
}

],

  "editor.minimap.enabled": true,
  "liveSassCompile.settings.generateMap": false
}

On the savePath line you have to keep the "~" or else it wont work.

On "editor.minimap.enabled": and "liveSassCompile.settings.generateMap":

These lines are for if you want to generate a map.css file, put "false" for no, or "true" for yes.

Stalk

okay, might have to check that, implemented it long back, will have to check again @myko. – Tallulah

Answer 9

Add this to generate .css files in a css folder in the project root directory:

"liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css"
    }
  ],

Or to generate in dist/css:

"liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/dist/css"
    }
  ]

This can either be in VS Code global settings.json to apply to all projects (look for "liveSassCompile.settings.formats" and change the "savePath" line; the provided "format" and "extensionName" are already the defaults), or if you want to limit the settings to the current project, place the settings in a settings.json file within a folder named .vscode.

Refer to the Live Sass Compiler settings doc for more information: https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md

Wherewithal

Answer 10

Do everything as Sulara said. When you open the settings.json file, it may look like this.

{
    "window.zoomLevel": 0
}

So, you need to apply the recommended settings like the following.

{
    "window.zoomLevel": 0,
    "liveSassCompile.settings.formats": [{
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "./css"
    }]
}

Basilius

Answer 11

I have the same issue but this was able to help, Just replace the setting.json of the extension with this if you want the folder to be created in the directory with your Sass folder

{
  "workbench.iconTheme": "material-icon-theme",
  "tabnine.experimentalAutoImports": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "workbench.colorTheme": "SynthWave '84",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "files.autoSave": "afterDelay",
  "liveSassCompile.settings.autoprefix": [],
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/../css/"
    }
  ]
}

Ricci

Answer 12

You can go to VSCode Setting.json file and add following lines after the existing configuration.

Example:

src path- project_folder/sass/style.scss

output path - project_folder/css/style.css

"liveSassCompile.settings.formats": [{ "format": "expanded", "extensionName": ".css", "savePath": "/css/" }]

Disagree

Answer 13

settings > extensions > live sass compiler > show output window on

Set the setting to warning or error. You could also use none if you want

enter image description here

Saintpierre