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

时间：2012-12-20 18:54:17

标签： c# css tfs asp.net-mvc-4 visual-studio-2012

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

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

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

7 个答案:

答案 0 :(得分：4)

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

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

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

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

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

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

    \MySolution
   \Common
      \Images
      \Scripts
      \Styles

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

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

    将共享资源添加为链接

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

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

    添加 AfterBuild 任务以复制文件

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

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

    右键单击该项目，然后选择卸载项目。再次右键单击该项目，然后选择编辑＆lt; ProjectFileName＆gt; 。滚动到底部并添加以下内容（正好在“＆lt; / Project＆gt;”上方）：

      <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的答案中从this link改编的复制任务。

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

答案 1 :(得分：2)

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

您也可以创建各种类型的CDN应用程序。

MVC App＃1 

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

MVC App＃2 

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

答案 2 :(得分：2)

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

SASS郎 少

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 ..阿卡迪亚网站..多种语言，多种货币..服务器和团队在同一个跨品牌和每个商店的几个应用程序上工作..

答案 3 :(得分：2)

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

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

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

答案 4 :(得分：2)

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

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

答案 5 :(得分：1)

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

答案 6 :(得分：0)

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

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

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

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

相关问题
最新问题