MEANjs自定義引導主題

我正在嘗試將自定義主題樣式添加到MEANjs附帶的標準core.css中。

你可以在我的CSS中看到我已經爲svg樣式添加了'background：'blue'！important'屬性。但是，背景並未設置爲藍色。

我想這意味着core.css文件並不是我要爲核心模塊放置主題的地方，但我不知道它應該放在哪裏。

任何提示或指針，將不勝感激。

/core/css/core.css

.content { 
    margin-top: 50px; 
} 
.undecorated-link:hover { 
    text-decoration: none; 
} 
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { 
    display: none !important; 
} 
.ng-invalid.ng-dirty{ 
    border-color:#FA787E; 
} 
.ng-valid.ng-dirty{ 
    border-color:#78FA89; 
} 

.visualization{ 
    border-radius:10; 
    border-color:"green"; 
    background:"blue" !important; 
} 

svg{ 
    height:100%; 
    width:100%; 
    fill:"blue" !important; 
}

/core/views/home.client.view.html

<section data-ng-controller="HomeController" data-ng-init="init()"> 
    <div class="jumbotron text-center"> 
     <svg 
      ng-controller="VisualizationController" 
      class="visualization" 
      id="visualization_0" 
      height="500" 
      width="500"> 
      <circle cx="50" cy="100" r="40" stroke="black" stroke-width="3" fill="red"></circle> 
     </svg> 
    </div> 
</section>

來源

2014-09-30 ramsey0

您是否在角度模塊中創建了任何子文件夾？如果我記得，創建它時，它可以讓您選擇這樣做。另外，你能否提供你的文件夾層次結構的細目？ – 2014-10-09 20:55:44

你的意思的代碼是正確的，我認爲CSS是錯誤的。您是否嘗試過：

svg path { 
    fill: blue; 
}

我必須承認，我不喜歡中庸的方式處理CSS。它迫使你進入一個奇怪的文件夾結構，然後只是連接文件。使用LESSCSS從引導源和包括自定義模塊構建會更好

來源

2015-02-12 09:18:36 sidonaldson

我相信即使開發環境使用CSS的縮小版本。

使用咕嚕命令：

grunt build

這將執行醜化和cssmin將更新您正在查看的CSS。

來源

2015-04-08 22:14:37 mackbrowne

您可以爲主題CSS創建單獨的文件夾，並在default.js文件中引用它。

例如：導航到您的公共文件夾。在名爲「主題」的內部創建一個新文件夾。將所有與你的主題相關的CSS文件放在這個文件夾中。

接下來，導航到「config」文件夾。進入資產文件夾並找到「default.js」。下面您會看到一個數組，您可以在其中添加要加載到頁面中的css路徑。如果需要，使用逗號添加多個文件。

module.exports = { 
 
    client: { 
 
    lib: { 
 
     css: [ 
 
     // bower:css 
 
     'public/lib/bootstrap/dist/css/bootstrap.css', 
 
     'public/lib/bootstrap/dist/css/bootstrap-theme.css', 
 
     'public/theme/theme.css' // THIS IS THE THEME CSS 
 
     // endbower 
 
     ], 
 
     js: [ 
 
     // bower:js 
 
     'public/lib/angular/angular.js', 
 
     'public/lib/angular-resource/angular-resource.js', 
 
     'public/lib/angular-animate/angular-animate.js', 
 
     'public/lib/angular-messages/angular-messages.js', 
 
     'public/lib/angular-ui-router/release/angular-ui-router.js', 
 
     'public/lib/angular-bootstrap/ui-bootstrap-tpls.js', 
 
     'public/lib/angular-file-upload/dist/angular-file-upload.js', 
 
     'public/lib/owasp-password-strength-test/owasp-password-strength-test.js' 
 
     // endbower 
 
     ],

一旦做到這一點，請查看您的網頁在瀏覽器中。右鍵單擊並檢查您的頁面「head」標籤以確保您的css加載成功。

來源

2016-05-05 20:00:52

雖然這可能最低限度地回答了問題，但提供有關如何執行此操作的其他詳細信息將顯着提高其長期價值。請[編輯]你的答案，添加一些解釋。 – 2016-05-06 11:33:46

MEANjs自定義引導主題

回答

相關問題