How to manage assets (css) in MEAN.js & Node.js

Question

MEAN.js uses config files for css files management; it also autoload all css files for module.

Question #1: How to exclude particular files from the list?

Question #2: What is a right way to include particular CSS file only for some pages (partials)?

Question #3: How to include CSS files in particular order? For now I use a number prefix for file names, ex. 1_file.css, 2_file.css, etc

Answer 1

Question #1: How to exclude particular files from the list?

Use an exclamation mark in the path to exclude specific files being included in the minified application css. You can add as many files as you want to the clientCSS array in Line 10 of gruntfile.js. It would look something like this:

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

Question #2: What is a right way to include particular CSS file only for some pages (partials)?

Option 1

I was working on Option 2 when I found the Angular Route Styles repo. If this first option doesn't work for you then I'll get to finishing the second one

You'll have to add the "ng-app" to your html tag in the layout.server.view.html file as well as the script reference to route-styles.js. In the public/config.js file add ngRoute and routeStyles as dependencies.

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

Then add your page-specific styles to $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
}]);

Option 2

You could do some custom modifications on your own to load specific css files either by getting the current route and dynamically choosing which file to pull or with a case switch. This could be the start of either.

It looks like the css files are concatenated into "application.min.css " starting on Line 78 by the grunt task cssmin via applicationCSSFiles which is populated via Line 73 in the config.js file. and made accessible in config/express.js.

Inside each module's css folder create a folder named "overrides". Include all of your page specific css inside a file called "override.css"

Inside config/express.js add:

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

Inside env/config/all.js, add this after the "css" block on Line 28

overrides: [
    'public/modules/**/css/overrides/*.css'
],

Inside config/config.js add this to the bottom of the file:

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

Finally, to pull each override.css file add the following to app/views/layout.server.view.html

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

Question #3: How to include CSS files in particular order? For now I use a number prefix for file names, ex. 1_file.css, 2_file.css, etc

A consistent naming convention like you're already using is the next best thing to manually adding the file names to an array.