如何在MEAN.js和Node.js中管理资产(css)

Question

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

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

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

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

Answer 1

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

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

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

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

选项1

当我找到Angular Route Styles repo 时,我正在研究Option 2 .如果第一个选项对你不起作用,那么我将完成第二个选项

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

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文件从第78行开始通过grunt任务cssmin通过applicationCSSFiles 连接到"application.min.css",applicationCSSFiles通过config.js文件中的第73行填充.并在config/express.js中可访问.

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

在config/express.js里面添加:

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

在env/config/all.js中,在第28行的"css"块之后添加

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等

像您一直使用的一致命名约定是手动将文件名添加到数组的下一个最佳选择.