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

Question

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

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

问题 #2：只为某些页面（部分）包含特定 CSS 文件的正确方法是什么？

问题 #3：如何以特定顺序包含 CSS 文件？现在我对文件名使用数字前缀，例如。 1_file.css、2_file.css等

Answer 1

问题 #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 文件中添加 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 文件从 Line 78 by the grunt task cssmin 开始通过 applicationCSSFiles 连接到“application.min.css”中，该文件通过 Line 73 in the config.js file. 填充并可以在 config/express.js 中访问。

在每个模块的 css 文件夹中创建一个名为“overrides”的文件夹。在名为“override.css”的文件中包含所有特定于页面的 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等

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