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

He is dead just to exchange functionality in several MVC projects. You simply put the code in your own project and refer to it as many solutions as your heart desires. Clean, standard, nice.

Are there any means to create style code? I would like to have our common CSS files, those that give our applications a similar look and feel in just one place. Now I have to create new copies for each 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 cannot isolate CSS files into my own project, and I really don't want to have a web application that just css sits somewhere so that all applications can remotely use files through fully qualified URLs. Is there a TFS trick you can do with a source control to link files together? Is there something I was not thinking about?

+8
c # css tfs visual-studio-2012 asp.net-mvc-4
source share
7 answers

1 - Look at CSS template systems as indicated:

SASS-Lang Less

http://css-tricks.com/sass-vs-less/ (a really good article to start with, many related items in its related message widgets)

This allows you to code stylesheets in an organized manner. You can quickly add dynamic configurations and global changes.

2 - Create your own global CSS listing system:

If you prefer not to use the above CSS stylesheet. Example

//cdn.com/assets/css/reset.css //cdn.com/assets/css/main.css //cdn.com/assets/css/page_home.css //cdn.com/assets/css/page_cart.css 

even...

 //cdn.com/assets/global/form_styles.css //cdn.com/assets/global/global_shortcuts.css 

They use the same forms, tables and tr and other filling rules. Example

 .black{color:#000 !important} .right{float:right} .left{float:left} 

I know that I look like a frame mentality, but it works.

You can quickly change globality to ensure that all pages are updated.

CDN offers for storage and compass are also recommended. You see that storing on a CDN will save you a headache from worrying about application failure / speed / load.

Your application may just look like

 /cloud/servers/settings/global/db /cloud/servers/settings/global/librarys /cloud/servers/settings/global/css_config.php (example) /cloud/servers/1/webapp.com/ /cloud/servers/1/webapp.com/model /cloud/servers/1/webapp.com/view /cloud/servers/1/webapp.com/view/themes/tpl /cloud/servers/1/webapp.com/inc /cloud/servers/1/webapp2.com/ /cloud/servers/1/webapp2.com/model /cloud/servers/1/webapp2.com/view /cloud/servers/1/webapp2.com/view/themes/tpl /cloud/servers/1/webapp2.com/inc //cdn.com/assets/css 

3 - Approach configuration

I personally believe that the question should concern the approach of your general development methodology. Having CSS for working with a CDN application or having CSS on a separate server that synchronizes with CDN for real-time production is a good idea - keeping it separate and maintaining it using a style language is even better. Then you can quickly use skins, css libraries, image libraries, and more. Keeps things organized, faster and much better and ENJOYS to watch and take pride in coding.

Maintaining and using a better system is what you need. You should use a manual and classic approach to IMO folder structure. You don’t have to worry about the flexible design of applications for mobile / tablets and other bearing problems with updating a single CSS line for all applications or even individual applications - even in languages ​​and working with several website development teams.

JUST MY MEN'S OPINION

It is also strongly recommended that you use the CSS style language, and many people hate them. But they become very useful, especially SAAS, this is not a fuss, like NodeJS. It actually works. And works wonders. Look at TopShop, GorgeousCouture .. Arcadia sites .. several languages, several currencies .. servers and teams working on the same cross and several applications for each store.

+2
source share

Here is a “dead simple” solution for sharing web resources between projects without using CDN, LESS, SASS, NuGet, etc.:

  • Create shared solution folders containing shared resources, or simply designate one of the projects as a wizard.
  • Use Add As Link to add shared resources files to each project as needed.
  • Add an AfterBuild task to each project file that will copy related files to the project folders. This is only necessary for Visual Studio test / debug (F5) to work locally.

If you need information on how to do this, read on.

Configure solution folders for shared resources

** Please note that if you are just going to share files directly from one project with one or more additional projects, you can skip this step.

Visual Studio solution folders should not reflect folders on physical file systems, but this will help preserve your sanity. Therefore, first create folders on the local file system and copy resource files to them. New folders should be located under the folder of your solution. For example:

 \MySolution \Common \Images \Scripts \Styles 

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

Then add the files to the new solution folders by right-clicking on each folder and using Add existing item to add the contents of the folders.

Add Shares as Links

For each project that will use shared resources, right-click the project folder and select "Add Existing Item." Go to the shared folder, select the files you want, click the drop-down arrow next to the Add button, and select Add As Link.

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

Add AfterBuild task to copy files

When you publish the application on the server, the related files will be copied to the project folders to which they are attached, and everything works as expected. However, in the development environment, related files are not physically located in the project folders. Therefore, when you press F5 to test your application in VS, there will be no shared resources.

A simple solution is to add an MSBuild task to copy related files from their source after each build. This must be done for each project that contains shared resource references.

Right-click the project and select Upload Project. Right-click the project again and select Edit <ProjectFileName>. Scroll down the page 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 the task adapted from this link in TheCodeDestroyer answer.

Save the project file, then right-click and select Update Project.

+4
source share

Why not just host one site node so that the base style and other sites refer to these styles? I see nothing wrong with that.

You can also create a CDN sorting application.

MVC application # 1

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

MVC App # 2

 <link src="http://mvcapp1.com/css/styles.css" /> 
+2
source share

Well, I know little about the development of asp.net, so forgive me if this is not so, but

If your project’s resource files are set to “Assembly action” No or Content , and the Copy to output directory folder is set to Copy ... you can easily create a project like Class Library and put all the files there (keeping the paths), and then reference this "class library" in every project that needs files. Each file will be copied to each link project in the solution assembly.

For the assembly action, the Inline Resource will also work, but you will need to find a way to specify the assembly containing these files (because it will be different from Assembly.GetEntryAssembly ).

+2
source share

Personally, I don’t like or don’t want a CDN solution, as if you have many pages, they depend on CDNs 100% of the time. After some research, I found this solution that was perfect for my use. Hope someone will look for an alternative, this is one of them:

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

+2
source share

We had the same problem, and for our purposes, we put all the common CSS / JS / Images / Layout View into the NuGet package and reuse it from every application in which we need it. This works great for us.

+1
source share

If you are open to using Sass, Compass extensions may be exactly what you need.

http://compass-style.org/help/tutorials/extensions/

A gem-related extension makes it easy to include styles contained in a gem from anywhere in the system in which the gem is installed. I recently used this in my latest application (a specialized multi-user CMS, where each user has his own subdomain, which has an individual layout, but all components / widgets have the same style in the application). Setting up a new subdomain style is as simple as launching one command and setting up the template that I have installed with a simple layout framework.

Compass extensions can be used to store images and JavaScript files as part of a template, but deployed files are not automatically updated as styles (templates from the Compass extension are different from stylesheets because templates are for copying and stylesheets are for importing).

0
source share

All Articles