SCSS files not grouped in Solution Explorer in Visual Studio

Question

I'm using Visual Studio 2013.

In the solution explorer, scss files usually have their .css, .css.map, .min.css files grouped together in a tree under the .scss file. However, my solution explorer is showing them all individually, which is causing some disorganization.

Can anyone help me out and let me know a shortcut/trick to get these files grouped together again?

Answer 1

Either manually edit the project file or make use of this nifty Visual Studio Extension:

The manual trick is to edit the project file and add the DependentUpon metadata to each file you want to show nested:

<ItemGroup>

    <!-- This will cause Visual Studio to show the file under Foo.1.cs -->
    <Compile Include="Foo.1.1.cs">
      <DependentUpon>Foo.1.cs</DependentUpon>
    </Compile>

    <!-- This will cause Visual Studio to show the file under Foo.cs -->
    <Compile Include="Foo.1.cs">
      <DependentUpon>Foo.cs</DependentUpon>
    </Compile>
    <Compile Include="Foo.cs" />
    <Compile Include="Program.cs" />
    <Compile Include="Properties\AssemblyInfo.cs" />
  </ItemGroup>

Source:

• File Nesting Extension