How to include generated files in Visual Studio Web Deployment Package without adding them to Source Control

When using Web Deployment the default is to only have it include the files that are needed to run the application. You can tell Visual Studio to include all files in the project or project folder but that could be messy.

Let's say we want to generate CSS from SCSS. In that case we wouldn't want to include the generated file into Source Control but rather generate it whenever we build or change some SCSS.

Now comes the tricky part. In order to include the generated file in the project so that Web Deployment would include it but not add it to Source Control we can use a .tfignore file. I've created one and put it in the solution root. To have it ignore the generated CSS file in my web project we simply have to add this line:
\Corp.Web\Static\SCSS\site.css

One confusing bit is when you add the generated file to your project it still shows up in Pending Changes. Just Undo that change and it won't show up as a pending change anymore.

One last thing piece to the puzzle is to hide the generated file from Solution Explorer since we don't ever want to edit that file manually.

Edit the project file, find the generated file, add the Visible tag inside the Content tag and set it to false:
<Content Include="Static\SCSS\site.css">
   <Visible>false</Visible>
</Content>