You will need two things:
- tasks.json file
- Blade Runner extension for VS CODE
Start by creating .vscode folder in your project.
Then in it create tasks.json file with the following content:
{
"version": "0.1.0",
"command": "sass",
"isShellCommand": true,
"args": ["--watch", "."],
"showOutput": "always"
}
Now, after opening the project you can run the task by clicking Ctrl+Shift+B.
To automate the process use Blade Runner extension - https://marketplace.visualstudio.com/items?itemName=yukidoi.blade-runner
Blade Runner will run the task automatically after opening the project :)
Answer from gabrieln on Stack OverflowVideos
You will need two things:
- tasks.json file
- Blade Runner extension for VS CODE
Start by creating .vscode folder in your project.
Then in it create tasks.json file with the following content:
{
"version": "0.1.0",
"command": "sass",
"isShellCommand": true,
"args": ["--watch", "."],
"showOutput": "always"
}
Now, after opening the project you can run the task by clicking Ctrl+Shift+B.
To automate the process use Blade Runner extension - https://marketplace.visualstudio.com/items?itemName=yukidoi.blade-runner
Blade Runner will run the task automatically after opening the project :)
A solution without additional extensions
With sass
Assuming you have sass installed globally with for instance:
npm install -g sass
Open the folder and create a task.json file under .vscode containing
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Watch Sass",
"type": "shell",
"command": "sass --watch src/style.sass styles/style.css --style=compressed",
"problemMatcher": [],
"group": {
"kind": "build",
"isDefault": true
},
"runOptions": {
"runOn": "folderOpen"
}
}]
}
With node-sass
Replace sass with node-sass in the above.
In both cases make sure the source/destination filename, location and extension are correct (in my case src/style.scss and style/style.css)
With a Workspace file
Or copy the section in your .vscode-workspace file to avoid clutter of .json files.
Make sure to change the sass source and destination files to your personal needs.
Setup VSCode
[EDIT] whith the current version this is asked the first time you open the workspace file and the following steps are no longer needed. To a llow automatic run tasks
- Ctrl+Shift+P
- select Manage automatic Tasks and
- select Allow Automatic Tasks in Folder and
- close and reopen your folder (or Workspace)
The sass compiler will be called and starts watching all your edits with a reassuring:
Compiled css\src\style.sass to css\style.css.
Sass is watching for changes. Press Ctrl-C to stop.
or with error messages when compilation failed.:
Error: semicolons aren't allowed in the indented syntax.
╷
7 │ padding: 0;
│ ^
╵
css\src\_base.sass 7:12 @import
css\src\style.sass 1:9 root stylesheet
EDIT command and args can be separated
{
"label": "Compile sass",
"type": "shell",
"command": "sass",
"args": [
"--watch",
"--style=compressed",
"./style/src/main.sass",
"./style/main.css"
],
"runOptions": {
"runOn": "folderOpen"
}
},
I am currently working on a project that requires compiling sass and I cannot figure out how to do that in Visual Studio 2022. It seems like there isn’t a build in way to do that.
I have played with web compiler 2022 + and gulp scripts but they seem very janky.
What is your workflow/tools you use to compile SASS in visual studio 2022?
Thanks in advance!
I realise this question is 10 months old, and I don't know if you worked out a way but I have been using Web Compiler for a while to compile my .scss files into stylesheets.
It's quite simple really and involves having a single stylesheet that imports from multiple files.
You state that this doesn't work, however I have used this process for a number of years and this is how I normally do it.
e.g. If you had a stylesheet called Default.scss, it's contents would look like this.
@import 'Reset.scss';
@import 'Defaults.scss';
@import 'Main.scss';
And your compilerconfig.json would look like this.
[
{
"outputFile": "wwwroot/css/styles.css",
"inputFile": "Styles/Default.scss"
}
]
I tend to have different stylesheets for different page styles drawn from a number of components, so if I have a page containing a product card, I would include the scss component that contains the style for that card.
If this doesn't help the OP because it was asked a while ago I hope that it's helpful to anyone else that finds it.
Per the configuration capabilities of Web Compiler 2022, it will minify but doesn't have bundling features. There is a .NET Nuget package named BuildBundlerMinifier that does allow minification and bundling. However it has not been updated since 2020 and will not work with any ES6+ JavaScript code. That's because it uses an older version of Nuglify (1.13.8) that performs JS code minification so there is no way of minifying ES6 and later code by using the tool currently (it will error on build). The pure .NET approach to this especially for razor pages / Blazor isn't super robust.
Therefore if a powerful JavaScript bundling tool is needed for a .NET web app, you'll need to explore Gulp, Grunt, or WebPack which are all mature JavaScript options for bundling and minification (and can be integrated into a .NET app). If minification is all you need, just stick with Web Compiler 2022, and reference each individual minified file.