HTML & CSS

Compile SCSS in a Visual Studio 2022 Web Project

Use project-local Dart Sass from Visual Studio 2022, generate CSS into the web asset directory, and check watch updates, static paths, and release output.

By Uddhav Gopani, FounderPublished 27 September 2026Updated 29 September 2026

Use the compiler belonging to the web project

For SCSS in a Visual Studio 2022 web project, use a project-owned Sass compiler and run its build command from the project directory. Visual Studio’s editing features and any installed extensions are separate from that compiler. An extension that colors SCSS text is not evidence that saving the file generates deployable CSS.

This example assumes an ASP.NET Core project with a conventional wwwroot asset directory. Adapt the output location to your project’s actual static-file configuration. If the project already uses a front-end build system, add the SCSS entry there instead of creating a competing compiler that writes to the same destination.

Open a terminal at the correct folder

Open Visual Studio’s terminal through View → Terminal, then confirm that the current directory is the web project containing package.json, not merely the parent solution directory. Microsoft’s developer-shell documentation describes the terminal and shell environment. Node.js and npm still need to be available in that environment.

Install the official sass package as a pinned development dependency using the project’s normal dependency workflow. Keep package.json and its lockfile under version control. A globally installed compiler can be useful interactively, but a local dependency makes it clearer which compiler the project expects on another machine.

Create a small entry stylesheet

Create Styles/site.scss with this source. Keep it outside the generated CSS directory so it is clear which file developers edit and which file the browser receives.

$gutter: 12px;
$surface: #f1f5f9;

.project-panel {
  padding: $gutter ($gutter * 2);
  background: $surface;
  & h2 { margin-block-start: 0; }
}

Add these entries to the existing scripts object. The one-shot command writes readable CSS for inspection and finishes. Watch mode is a separate process for local editing, while the release command generates compact CSS without a source map.

{
  "scripts": {
    "css:build": "sass --no-error-css Styles/site.scss wwwroot/css/site.css",
    "css:watch": "sass --watch Styles/site.scss:wwwroot/css/site.css",
    "css:release": "sass --no-error-css --no-source-map --style=compressed Styles/site.scss wwwroot/css/site.css"
  }
}

Verify a build and a changed input

Run npm run css:build and inspect wwwroot/css/site.css. The .project-panel rule should have padding 12px 24px and background #f1f5f9. The nested heading rule should appear as .project-panel h2. These details confirm that Sass variables and nesting were compiled rather than copied unchanged.

Change $gutter to 16px and $surface to #e0f2fe, then rebuild. Confirm padding 16px 32px and the new background. If the output stays unchanged, verify the command’s working directory and source path before changing the page. A successful command against another project’s source will not update this project’s asset.

Check the static-file URL separately

Reference the generated stylesheet through the application’s normal layout or asset mechanism. In a conventional wwwroot setup, the browser URL is commonly /css/site.css, not /wwwroot/css/site.css. Preserve any application path base or asset conventions already in use. Microsoft’s static-file documentation explains the relationship between web-root files and requests.

Run the application and inspect the stylesheet response, then check a .project-panel element’s computed padding and background. If the response is current but the appearance differs, inspect competing declarations. If the response is stale or missing, investigate delivery and caching before treating the issue as a compiler failure.

Use watch mode as a development aid

Start npm run css:watch while editing and keep its terminal visible. Save a source change and confirm the output timestamp and contents update. Stop the process when finished. Do not use the indefinitely running watch command as a release build step or assume that pressing the application’s Build button automatically starts this separate process.

An SCSS syntax error should appear in the compiler output. The release command uses --no-error-css, and the release process must also check for a nonzero exit status. A generated file left from a previous successful build is not proof that the latest source compiled correctly.

Make the release reproduce the terminal result

Run the release compilation before packaging the web application and verify that the resulting CSS is included in the published output. Use the same dependency lockfile in the release environment. If generated files are created after project evaluation, check the project’s item and publish rules explicitly rather than assuming a newly created file was discovered.

The local CSS minifier can inspect compiled CSS but cannot run SCSS variables or modules. Dart Sass owns compilation in this workflow. Keeping compiler execution and static-file delivery visible makes the setup usable from Visual Studio, a terminal and a release runner without an undocumented editor dependency.