如何在MVC站点之间共享通用样式信息（css，图像等）？

Question

在多个MVC项目中共享功能非常简单。 您只需将代码放入其自己的项目中，并在您希望的解决方案中引用它。 干净，标准，光荣。

有没有办法为样式代码执行此操作？ 我想在一个地方拥有我们常见的CSS文件，这些文件可以为我们的应用程序提供类似的外观和感觉。 现在我必须为每个新应用程序生成新副本。 因此，如果需要修复某些东西，则需要在十几个地方修复十几次。

还有其他人处理过这件事吗？ 我不能将CSS文件分离到他们自己的项目中，也不是真的想要一个只是 css坐在某个地方的Web应用程序，所以所有应用程序都可以通过完全合格的Urls远程使用这些文件。 是否有TFS技巧可以使用源代码控制将文件链接在一起？ 有什么我没有想到的吗？

Answer 1

以下是在不使用CDN，LESS，SASS，NuGet等的情况下在项目之间共享Web资源的“简单易用”解决方案：

1. 创建包含要共享资源的通用解决方案文件夹 ，或者只是将其中一个项目指定为主要项目。
2. 使用“添加为链接”可根据需要将共享资源文件添加到每个项目。
3. 将AfterBuild任务添加到每个项目文件，该文件将链接的文件复制到项目文件夹。 这只需要Visual Studio测试/调试（F5）在本地工作。

如果您需要有关如何执行此操作的详细信息，请继续阅读。

配置共享资源的解决方案文件夹

** 请注意，如果您只是将文件直接从一个项目共享到一个或多个其他项目，那么您可以跳过此步骤。

Visual Studio解决方案文件夹不必反映物理文件系统文件夹，但这样做有助于保持您的理智。 因此，首先在本地文件系统上创建文件夹，然后将资源文件复制到其中。 新文件夹应位于解决方案文件夹下。 例如：

\MySolution
   \Common
      \Images
      \Scripts
      \Styles

回到Visual Studio，右键单击Solution Items文件夹，然后使用Add Solution Folder复制新文件系统文件夹。

接下来，通过右键单击每个文件夹并使用“ 添加现有项”添加文件夹的内容，将文件添加到新的解决方案文件夹。

添加共享资源作为链接

对于将使用共享资源的每个项目，右键单击项目文件夹，然后选择“ 添加现有项” 。 浏览到公共文件夹，选择所需文件，单击“添加”按钮旁边的下拉箭头，然后选择“添加为链接”。

您可能会收到有关添加项目目录结构之外的文件的源代码管理警告，但这可以忽略，因为链接文件将在源代码的源代码管理下进行。

添加AfterBuild任务以复制文件

将应用程序发布到服务器时，链接的文件将复制到它们链接到的项目文件夹，并且一切都按预期工作。 但是，在开发环境中，链接文件实际上不在项目文件夹中。 因此，当您点击F5在VS中测试您的应用程序时，共享资源将会丢失。

简单的解决方案是添加MSBuild任务，以便在每次构建后从源中复制链接的文件。 需要对包含共享资源链接的每个项目执行此操作。

右键单击该项目，然后选择“ 卸载项目” 。 再次右键单击该项目，然后选择“ 编辑<ProjectFileName>” 。 滚动到底部并添加以下内容（在“</ 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>

** 在TheCodeDestroyer的答案中从此链接复制任务。

保存项目文件，然后右键单击并选择“ 重新加载项目” 。

Answer 2

为什么不只有一个网站主机基础样式和其他网站引用这些样式？ 我没有看到任何错误。

您也可以创建一个类似的CDN应用程序来执行此操作。

MVC App＃1

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

MVC App＃2

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

Answer 3

1 - 查看CSS模板系统，如上所述：

SASS-Lang Less

http://css-tricks.com/sass-vs-less/ （非常好的文章开始，他的相关帖子小部件中的许多相关项目）

这些允许您以有组织的方式编写样式表。 您可以轻松快速地添加动态配置和全局更改。

2 - 开发者自己的CSS全球列表系统：

如果您不想使用上面的CSS样式表系统。 例

//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

甚至...

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

在这些，相同的表单填充，表和tr和其他填充规则。 例

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

我知道我听起来像框架心态，但它的工作原理..

您可以快速更改全局以确保更新所有页面。

CDN存储和指南针建议也是有效的。 您可以看到在CDN上存储可以避免担心应用程序故障/速度/负载。

您的应用程序可以就像

/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 - 方法的配置

我个人认为问题应该是关于整体开发方法的方法。 让CSS坐在CDN应用程序上，或者在单独的服务器上使用CSS与CDN同步以进行生产实时模式是一个好主意 - 保持它独立并通过样式表语言维护它甚至更好。 然后，您可以快速使用外观，css库，图像库等。 让事情井然有序，更快，更好，更令人愉快地看待并为编码感到自豪。

保持它并使用更好的系统是我们所需要的。 您应该使用IMO的文件夹结构的手动和经典方法。 您不必担心移动/平板电脑的响应式应用程序设计以及更新所有应用程序甚至单个应用程序（即使是语言）和处理多站点开发团队的CSS线路的其他轴承问题。

只是我的愚蠢意见

还强烈推荐一种CSS样式表语言，肯定很多人都讨厌它们。 但是它们变得非常有用，特别是SAAS它不像NodeJS那样大肆宣传......它确实有效。 并且有奇迹。 看看TopShop，GorgeousCouture ..阿卡迪亚网站..多种语言，多种货币..服务器和团队在同一个跨品牌工作，每个商店有几个应用程序..

Answer 4

好吧，我对asp.net开发了解不多，所以请原谅我，如果不是这样，那么

如果项目中的资源文件将“ 构建操作”设置为“ 无”或“ 内容”和“ 复制到输出目录”设置为“ 复制...” ，则可以轻松创建类库类型的项目并将所有文件放在那里（保留路径），然后在需要文件的每个项目中引用此“类库”。 每个文件都将被复制到解决方案构建的每个引用项目中。

对于嵌入式资源构建操作，它也可以工作，但是，您需要找到一种方法来指定包含这些文件的程序集（因为它与Assembly.GetEntryAssembly不同）。

Answer 5

就个人而言，我不喜欢或不想要CDN解决方案，好像你有很多页面他们依赖CDN 100％的时间。 经过一些研究，我发现这个解决方案非常适合我的使用我希望无论谁想要替代方案，这都是其中之一：

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

Answer 6

我们遇到了同样的问题，为了我们的目的，我们将所有通用的CSS / JS / Images / Layout View放入NuGet包中，并在我们需要的每个应用程序中重用它。 它完全适合我们。

Answer 7

如果您愿意使用Sass，Compass扩展可能就是您所需要的。

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

扩展名作为gem附加时，允许您从安装了gem的系统的任何位置轻松地包含gem中包含的样式。 我最近在我的最新应用程序（一个专门的多用户CMS，其中每个用户都有自己的子域，具有自定义布局，但所有组件/窗口小部件在整个应用程序中具有相同的样式）中使用了它。 设置新的子域的样式就像运行单个命令和自定义我设置的具有简单布局骨架的模板一样简单。

Compass扩展可用于将图像和JavaScript文件作为模板的一部分保存，但部署的文件不会像样式那样自动更新（Compass扩展中的模板与样式表不同，因为模板用于复制，样式表是进口）。