CODEWITHSUNDEEP
sassvisual-studio-code
GD- Ganesh Deshmukh
GD- Ganesh Deshmukh

Reputation: 1554

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

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.

enter image description here

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?

Upvotes: 40

Views: 96601

Answers (14)

Gebrekidan Mequanint
Gebrekidan Mequanint

Reputation: 1

Go to the settings of Visual Studio Code > Extensions > Live Sass Compiler > Select Format JSON and paste the below code:

{
  "liveSassCompile.settings.excludeList": [
  ],
  "liveSassCompile.settings.autoprefix": [
      "> 1%",
      "last 2 versions"
  ],
  "liveSassCompile.settings.formats": [
    
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": null,
      "savePathReplacementPairs": null
    }
  ]
}

Upvotes: 0

Makinde Sodiq
Makinde Sodiq

Reputation: 39

enter image description hereI 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/"
    }
  ]
}

Upvotes: 1

ahmed ali
ahmed ali

Reputation: 1

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

Upvotes: 0

MD IMRUL KAYES
MD IMRUL KAYES

Reputation: 83

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
    }
  ]
}

Upvotes: 6

nCardot
nCardot

Reputation: 6595

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

Upvotes: 2

myko
myko

Reputation: 67

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.

Upvotes: 3

Tahir
Tahir

Reputation: 420

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"
]
}

Upvotes: 3

Ahmet Celtik
Ahmet Celtik

Reputation: 61

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.

Upvotes: 5

Jacob Chademwiri
Jacob Chademwiri

Reputation: 31

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/"
    }

Upvotes: 3

Soumyadeep Chatterjee
Soumyadeep Chatterjee

Reputation: 83

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/"
    }
  ]

Upvotes: 8

user13419933
user13419933

Reputation: 261

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/"
    }
  ]

Upvotes: 26

user3146035
user3146035

Reputation: 1

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/" }]

Upvotes: 0

Minhajul Karim
Minhajul Karim

Reputation: 21

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"
    }]
}

Upvotes: 1

sulara.perera
sulara.perera

Reputation: 779

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.

enter image description here

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

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

enter image description here

Upvotes: 55

Related Questions