如何在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擴展中的模板與樣式表不同，因為模板用於復制，樣式表是進口）。