How can I share common style information (css, images, etc.) across MVC sites?

Question

It's dead simple to share functionality across multiple MVC projects. You just put the code into its own project and reference it in as many solutions as your heart desires. Clean, standard, glorious.

Is there any means to do this for styling code? I'd like to have our common CSS files, the ones that give our applications a similar look and feel, in just one place. Right now I have to spawn new copies for every new application. Thus if something needs to be fixed, it needs to be fixed a dozen times in a dozen places.

Has anyone else dealt with this? I can't separate out the CSS files into their own project, nor do I really want to have a web application that's just css sitting somewhere so all of the applications can use the files remotely via fully-qualified Urls. Is there a TFS trick you can do with source control to link the files together? Is there something I haven't thought of?

Answer 1

Here is the "dead simple" solution for sharing web resources between projects without using CDN, LESS, SASS, NuGet, etc:

1. Create common Solution Folders containing the resources to be shared, or simply designate one of the projects to be the master.
2. Use "Add as Link" to add the shared resource files to each project as needed.
3. Add an AfterBuild task to each project file that will copy the linked files to project folders. This is only needed so that Visual Studio test/debug (F5) will work locally.

If you need the details on how to do this, keep reading.

Configuring Solution Folders for the Shared Resources

** Note that if you're simply going to share files directly from one project to one or more additional projects then you can skip this step.

Visual Studio solution folders do not have to reflect physical file system folders, but doing so will help preserve your sanity. So first create the folders on your local file system and copy the resource files into them. The new folders should be located under your solution folder. For example:

\MySolution
   \Common
      \Images
      \Scripts
      \Styles

Back in Visual Studio, right click on the Solution Items folder and use Add Solution Folder to replicate the new file system folders.

Next, add the files to the new solution folders by right-clicking each folder and using Add Existing Item to add the contents of the folders.

Add Shared Resources as Links

For each project that will use the shared resources, right-click the project folder and choose Add Existing Item. Browse to the common folder, select the desired files, click the drop-down arrow next to the "Add" button and choose "Add as Link".

You may get a source control warning about adding files that are outside of the project directory structure, but this can be ignored since the linked file will be under source control at its source.

Add an AfterBuild Task to Copy Files

When you publish the application to a server the linked files will copied to the project folders to which they are linked and everything works as expected. However, in the development environment the linked files do not physically reside in the project folders. So when you hit F5 to test your application in VS, the shared resources will be missing.

The simple solution is to add an MSBuild task to copy the linked files from their source after each build. This needs to be done to for each project that contains the shared resource links.

Right-click the project and choose Unload Project. Right-click the project again and choose Edit <ProjectFileName>. Scroll to the bottom and add the following (just above "</Project>"):

  <Target Name="AfterBuild">
    <!-- Copy linked content files to local folders so that they are available in the debugger. 
         This is only an issue when running the application locally. The linked files should 
         be automatically published to the correct folder when publishing to a web server. -->
    <Copy SourceFiles="%(Content.Identity)"
          DestinationFiles="%(Content.Link)"
          SkipUnchangedFiles='true'
          OverwriteReadOnlyFiles='true'
          Condition="'%(Content.Link)' != ''" />
  </Target>

** Copy task adapted from this link in TheCodeDestroyer's answer.

Save the project file then right-click and choose Reload Project.

Answer 2

Why not just have one site host that base styling and the other sites reference those styles? I don't see anything wrong with this.

You could create a CDN application of sorts to do this, too.

MVC App #1

<link src="~/css/styles.css" />

MVC App #2

<link src="http://mvcapp1.com/css/styles.css" />

Answer 3

Well, I don't know much about asp.net development, so forgive me, if it's not the case, but

If resource files in your project have Build Action set to None or Content and Copy to Output Directory set to Copy..., you can easily create the Class Library type of project and place all the files there (preserving the paths), and then reference this "Class Library" in every project that needs the files. Every file will be copied to every referencing project on solution build.

For Embedded Resource build action it will also work, but, you'll need to find a way to specify the assembly, which contains these files (because it will differ from Assembly.GetEntryAssembly).

Answer 4

Personally I don't like or want the CDN solution as if you have many pages they depend on CDNs 100% up time. After some research I found this solution which was perfect for my use I hope whoever will look for an alternative this is one of them:

http://mattperdeck.com/post/Copying-linked-content-files-at-each-build-using-MSBuild.aspx