MEANjs 自定义引导主题答案

【问题标题】：MEANjs custom bootstrap themeMEANjs 自定义引导主题
【发布时间】：2014-11-25 04:06:53
【问题描述】：

我是 MEANjs 和 Bootstrap 的菜鸟。

我正在尝试将自定义主题样式添加到 MEANjs 附带的标准 core.css。

您可以在我的 CSS 中看到我已将 'background:"blue" !important' 属性添加到 svg 样式。但是，背景没有设置为蓝色。

我想这意味着 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>

【问题讨论】：

您是否在 Angular 模块中创建了任何子文件夹？如果我记得，在创建它时，它为您提供了这样做的选项。另外，您能否提供文件夹层次结构的细分？

标签： twitter-bootstrap styles themes mean-stack meanjs

【解决方案1】：

您可以为您的主题 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 加载成功。

【讨论】：

虽然这可能只是最低限度地回答了这个问题，但提供有关如何执行此操作的更多详细信息将显着提高其长期价值。请edit你的答案添加一些解释。

【解决方案2】：

我相信即使是开发环境也使用 uglified-minified 版本的 CSS。

使用 grunt 命令：

grunt build

这将执行 uglify 和 cssmin，这将更新您正在查看的 css。

【讨论】：

【解决方案3】：

您的 MEAN 代码是正确的，我认为 CSS 是错误的。你试过了吗：

svg path {
    fill: blue;
}

我必须承认我不喜欢 MEAN 处理 CSS 的方式。它迫使你进入一个奇怪的文件夹结构，然后只是连接文件。使用 LESSCSS 从引导源构建并包含自定义模块会更好

【讨论】：