如何在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，右键单击“ 解决方案项目”文件夹，然后使用“ 添加解决方案文件夹”复制新的文件系统文件夹。

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

将共享资源添加为链接

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

您可能会收到有关添加项目目录结构之外的文件的源代码控制警告，但是由于链接文件将在其源代码下受到源代码管理，因此可以忽略此警告。

添加AfterBuild任务以复制文件

当您将应用程序发布到服务器时，链接的文件将复制到链接到的项目文件夹中，并且一切正常。但是，在开发环境中，链接文件实际上并不驻留在项目文件夹中。因此，当您按F5键以在VS中测试您的应用程序时，共享资源将丢失。

简单的解决方案是添加一个MSBuild任务，以便在每次构建后从其源文件中复制链接的文件。对于包含共享资源链接的每个项目，都需要这样做。

右键单击项目，然后选择卸载项目。再次右键单击该项目，然后选择Edit <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的答案中的此链接。

保存项目文件，然后右键单击并选择Reload Project。

Answer 2

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

在这些中，同样有form padding、table和tr等padding规则。例子

.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 库、图像库等。使事情井井有条，更快，更好，令人愉悦，并为编码感到自豪。

我们需要保留它并使用更好的系统。在我看来，您应该使用手动和文件夹结构的经典方法。您不必担心手机/平板电脑的响应式应用程序设计和其他轴承问题，只需为所有应用程序甚至单个应用程序（甚至语言）更新一条 CSS 行，以及与多站点开发团队打交道。

只是我的拙见

还会强烈推荐 CSS 样式表语言，肯定很多人讨厌它们。但它们变得非常有用，尤其是 SAAS，它不像 NodeJS 那样是一种炒作……它确实有效。并创造奇迹。看看 TopShop、GorgeousCouture.. Arcadia 网站.. 多种语言、多种货币.. 服务器和团队致力于同一个跨品牌以及每个商店的多个应用程序..