Question

我是MEANjs和Bootstrap的菜鸟。

我正在尝试将自定义主题样式添加到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>

Answer 1

您的MEAN代码是对的，我认为CSS错了。你试过了吗？

svg path {
    fill: blue;
}

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

Answer 2

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

使用grunt命令：

grunt build

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

Answer 3

您可以为主题css创建一个单独的文件夹，并在default.js文件中引用它。

例如：导航到您的公用文件夹。在＃34; Theme＆＃34;中创建一个新文件夹。将与主题相关的所有css文件放在此文件夹中。

接下来，导航到＆＃34; config＆＃34;夹。进入assets文件夹，找到＆＃34; default.js＆＃34;。在下方，您将看到一个数组，您可以在其中添加要加载到页面中的css路径。如果需要，请使用逗号添加多个文件。

＆＃13;

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
      ],

＆＃13;

完成后，请在浏览器中查看您的页面。右键单击并检查您的页面＆＃34; head＆＃34;标记以确保您的CSS已成功加载。

MEANjs自定义引导主题

3 个答案: