Meteor how to serve multiple css for different media types?

Question

I would like to have my Meteor app serve multiple css pages for various media types. For example:

<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css" />

How would I do this?

Answer 1

/packages/meteor/package.js

defined that .css files should be bundled.

However, taking a close look at docs.meteor.com, we can find this information:

CSS files work just the same: the client will get a bundle with all the CSS in your tree (excluding the server and public subdirectories).

That last part is the interesting bit, if you place your CSS files in /public they will not get bundled together. Instead app/lib/bundler.js does the following around line 517:

files.cp_r(path.join(project_dir, 'public'),
           path.join(build_path, 'static'), {ignore: ignore_files});

And server side, any files that are unresolved will also be checked in build/static, which means that when you put screen.css in /public you can keep using screen.css on the client.