如何在MEAN.js&amp ;;中管理资产(css) Node.js的

时间:2014-06-19 13:55:35

标签: node.js mean-stack

MEAN.js使用配置文件进行css文件管理;它还为模块自动加载所有css文件。

问题#1: 如何从列表中排除特定文件?

问题2:什么是仅为某些页面(部分)包含特定CSS文件的正确方法?

问题3:如何按特定顺序包含CSS文件?现在我使用数字前缀作为文件名,例如。 1_file.css,2_file.css等

1 个答案:

答案 0 :(得分:11)

问题1:如何从列表中排除特定文件?

在路径中使用感叹号排除缩小的应用程序css中包含的特定文件。您可以根据需要向Line 10 of gruntfile.js中的clientCSS数组添加任意数量的文件。它看起来像这样:

clientCSS: ['public/modules/**/*.css', '!path/to/file.css'],

问题2:只为某些页面(部分)包含特定CSS文件的正确方法是什么?

选项1

当我找到Angular Route Styles回购时,我正在使用选项2。如果第一个选项对你不起作用,那么我将完成第二个选项

您必须将“ng-app”添加到layout.server.view.html文件中的html标记以及route-styles.js的脚本引用中。 在public / config.js文件中添加ngRouterouteStyles作为依赖项。

var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ngRoute','routeStyles', 'ui.router', 'ui.bootstrap', 'ui.utils'];

然后将特定于页面的样式添加到$ routeProvider。

var app = angular.module('myApp', []);
app.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/some/route/1', {
            templateUrl: 'partials/partial1.html',
            controller: 'Partial1Ctrl',
            css: 'css/partial1.css'
        })
        .when('/some/route/2', {
            templateUrl: 'partials/partial2.html',
            controller: 'Partial2Ctrl'
        })
        .when('/some/route/3', {
            templateUrl: 'partials/partial3.html',
            controller: 'Partial3Ctrl',
            css: ['css/partial3_1.css','css/partial3_2.css']
        })
        // more routes can be declared here
}]);


选项2

您可以自行进行一些自定义修改,以通过获取当前路由并动态选择要拉出的文件或使用案例切换来加载特定的css文件。这可能是其中任何一个的开始。

看起来css文件从Line 78 by the grunt task cssmin开始通过applicationCSSFiles连接到“application.min.css”,applicationCSSFiles通过Line 73 in the config.js file.填充并可在config / express.js中访问。

在每个模块的css文件夹中创建一个名为“overrides”的文件夹。将所有特定于页面的css包含在名为“override.css”的文件中

在config / express.js内添加:

app.locals.cssOverrides = config.getCSSOverrides();

在env / config / all.js中,在"css" block on Line 28

之后添加
overrides: [
    'public/modules/**/css/overrides/*.css'
],

在config / config.js内部将其添加到文件的底部:

module.exports.getCSSOverrides = function() {
  var output = this.getGlobbedFiles(this.assets.overrides, 'public/');
  return output;
};

最后,要拉取每个override.css文件,请将以下内容添加到app / views / layout.server.view.html

{% for cssOverrideFile in cssOverrides %}<link rel="stylesheet" href="{{cssOverrideFile}}">
{% endfor %}

问题3:如何按特定顺序包含CSS文件?现在我使用数字前缀作为文件名,例如。 1_file.css,2_file.css等

您已经使用的一致命名约定是手动将文件名添加到数组中的下一个最佳选择。