Common Layout and CSS in MVC5 Projects

Question

I have 4 MVC5 projects, each targets a business sector and they have different release schedules, they all have common, structure, look and feel. They all live in the same solution (and they can as well live in different solution) and all of them live on the same directory level:

C:\MySolution\Solution.sln
C:\MySolution\MyFirstMVCProj\MyFirsMVCtProj.cproj
...
C:\MySolution\MyFourthMVCProj\MyFourthMVCProj.cproj

I am using SASS and Gulp to compile and generate CSS.

Currently a common SASS/CSS is "copied and pasted" into each project and any change in the _layout is copied and pasted into each project (if the developer remembers!!).

Is there any modern way, within MVC5, of having a common layout and SASS/CSS outside the projects to avoid the problem of duplication (and accordingly human error) or even a better way of managing this error-prone process?

N.B. I am aware of the Areas feature, but it doesn't suit our business model.

Community · Accepted Answer · 2017-05-23 12:17:31Z

1

A little late I know but for anyone googling, see this SO answer about sharing files between projects. I do this and store my css/js in a project of type "shared project".

Following the comment to expand on the other article: Basically you store your common files in the shared project and add them to the destination project but instead of adding them as an existing item (like you would a copy) choose 'add as link' from the menu on the 'add' button. This generates a link to the file in the shared project.

This is not enough though, you need the files copied on build so you need to add the following to each csproj file:

  <Target Name="CopyLinkedContentFiles" BeforeTargets="Build">
    <Copy SourceFiles="%(Content.Identity)" 
          DestinationFiles="%(Content.Link)" 
          SkipUnchangedFiles='true' 
          OverwriteReadOnlyFiles='true' 
          Condition="'%(Content.Link)' != ''" />
 </Target>

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Apr 4, 2017 at 14:52

Mark Ball

3863 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jake Bathman Over a year ago

Rather than just link to another SO answer, can you summarize the points here? Answers are sometimes modified or removed, so it could be better to have the info here, in addition to the link.

belipe · Accepted Answer · 2016-10-10 14:40:10Z

0

You could keep the common SASS library with all shared properties in a separate place and import it with different variables set to your projects.

answered Oct 10, 2016 at 14:40

belipe

413 bronze badges

5 Comments

Adam Over a year ago

could you please elaborate given the ASP.NET MVC environment and include a solution for the layout page?

belipe Over a year ago

I have never worked with ASP.NET, but I think this is rather a SASS question. So just keep your shared SASS outside of the other projects (with separate versioning?) and import it to your SASS files inside your projects by overwriting the default variables if needed.

belipe Over a year ago

You can define a variable inside SASS with $your-color-variable: black !default. Then you could overwrite the variable with $your-color-variable: #123 in your projects. After overwriting the variable you import the shared library with something like @import "../../my-sass-library/shared-library".

Adam Over a year ago

Actually, SASS is secondary, the main problem is _layouts of ASP.NET

belipe Over a year ago

As I said, I’m not into ASP.NET, but did you try symlinks? Keep _layout in an external folder and just add symlinks in the projects.

Collectives™ on Stack Overflow

Common Layout and CSS in MVC5 Projects

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related