Creating a separate bundle and requiring css before importing js fails

I’m submitting a bug report

• Library Version: 0.21.0

Please tell us about your environment:

• Operating System: Windows 8

• Node Version: 6.2.2

• NPM Version: 3.20.5

• Browser: all

• Language: ESNext

Current behavior:

I’m trying to bundle a 3rd party library which contains css and js - material-design-lite to be precise. I tried to <require from="material.css"> before any JS is imported.

If I do that, I’m getting the following error:

vendor-bundle.js:4102 GET http://localhost:9000/scripts/mdl-bundle.css 404 (Not Found)

When I import 'material-design-lite' before that, everything is okay. I will add my aurelia.json configuration as an answer to this issue for readability.

Expected/desired behavior:

If the current behavior is a bug, please provide the steps to reproduce.

I will add this information in my first answer to this issue.

• What is the expected behavior?

Being able to require a css file from a bundle before anything else.

• What is the motivation / use case for changing the behavior?

Personally, I don’t have a problem with importing js first, but I think this could become a problem in lazy loading scenarios when you use “common chunks” in separate bundles.

[3cp]

FYI, in latest cli bundler, the explicit “path”, “main” are optional, the bundler will try to find from the common place if it’s not set. The “resources” is totally obsolete, the bundler traces files without that “resources” hint.

[3cp]

There is no such issue in dumber bundler. Also this issue doesn’t exist on latest aurelia-cli bundler which is totally different from the one in v0.21.0.

The bundler setup for latest aurelia-cli:

{
  "name": "mdl-bundle.js",
  "dependencies": [
    "material-design-lite"
  ]
},

If you only want to require css without automatically bundle js main file:

{
  "name": "mdl-bundle.js",
  "dependencies": [
    {
      "name": "material-design-lite",
      "lazyMain": true
    }
  ]
},

As long as you didn’t explicitly import js file, the bundle will only contain that css file.