CSS imports not working properly

[avizcaino]

Hi,

I'm trying to bundle my app into a single bundle, including all html, css and js files. So far, I've managed to build the bundle with this configuration:

{
  "bundles": {
    "dist/aurelia": {
      "includes": [
        "aurelia-framework",
        "aurelia-bootstrapper",
        "aurelia-http-client",
        "aurelia-router",
        "aurelia-i18n",
        "aurelia-animator-css",
        "aurelia-templating-binding",
        "aurelia-templating-resources",
        "aurelia-templating-router",
        "aurelia-loader-default",
        "aurelia-history-browser",
        "aurelia-logging-console",
        "bootstrap",
        "moment",
        "text",
        "css",
        "*/**/*",
        "*/**/*.html!text",
        "*/**/*.css!text",
        "bootstrap/css/bootstrap.min.css!text",
        "font-awesome/css/font-awesome.min.css!text"
      ],
      "options": {
        "inject": true,
        "minify": true
      }
    }
  }
}

In my main.ts file, I have the imports for the bootstrap and font-awesome css:

import 'bootstrap/css/bootstrap.min.css!';
import 'font-awesome/css/font-awesome.min.css!';

but when running my app, those css are loaded from the jspm_packages instead from the bundle... I'm quite lost here since I would like to have a single bundle to decrease as much as possible the number of files downloaded from the server.

I don't know what I'm missing... any clue?

thanks!!

[EisenbergEffect]

Ok, this is something that is confusing and I apologize for that. Let me try to explain.

Basically, the module loader can load any type of resource, not just JS. It does this through plugins. SystemJS ships with a css plugin that will let you import css by placing a "!" after something with a .css file extension. However, in the above, you are using the text plugin by indicating "!test". As a result, your bundled resources are not configured to use the same plugin that your import statements request, so system.js honors your request, which causes it to use a different plugin and fallback to loading the resource dynamically.

Now, you probably saw the use of the test plugin in our bundling docs. Here's the reason for that. Aurelia itself supplies its own css plugin designed to be used to import css inside of a view via a require element like this:

<require from="some/style.css"></require>

The view pipeline will automatically use our plugin for that...which loads with the text plugin under the hood.

So, if you are importing css through the view system, you want to bundle with the test plugin, but if you are loading them through import statements with ".css!" you want to bundle them with the css plugin.

In practice, I would recommend that you import your css through the view system, using our plugin and then keep your bundle config as is. You would just turn your import statements into require elments in your components' view.

[davismj]

@EisenbergEffect So this works for all but one use case: I'm using bootstrap and I have multiple roots. I would like bootstrap to get bundled with the rest of the css and javascript, but there's no HTML for me to <require> it in that will affect all roots.

Thoughts?

[EisenbergEffect]

Yeah...you would need to use the css plugin in your main.js for that or include it separately in your html.

[soualid]

Just in case it might help somebody : to summarize, use !text (not !test which was obviously a typo) when bundling your CSS inside your app-build.js, then use it with the aurelia <require> tag to load it inside your views, which will use the bundled resources when exported.

[pcgeng]

@EisenbergEffect , how can I bundle the css files with plugin-css in bundles.js? I mean that why I add the bootstrap/css/bootstrap.min.css!css to dist/aurelia bundle file, after gulp bundle in success, I find there is no reference to bootstrap/css/bootstrap.min.css! but there is the reference to bootstrap/css/bootstrap.css! in aurelia.js. I wonder that is it a bug for plugin-css or aurelia-bundler?

[davismj]

how can I bundle the css files with plugin-css in bundles.js

Try adding this to your main.js:

import from 'bootstrap/css/bootstrap.min.css!

I find there is no reference to bootstrap/css/bootstrap.min.css!

Where did you expect to see it?

but there is the reference to bootstrap/css/bootstrap.css! in aurelia.js.

I must not understand because there is no reference to bootstrap in the Aurelia source.

[shawty]

@davismj Just a quick note on your last entry.

I'm currently trying to solve a problem or two here, also. I want to load font-awesome, but web pack is bitching about loading the font files.

However, what I wanted to say was, in your comment you say:

import from 'bootstrap/css/bootstrap.min.css!

As Iv'e just found out after trying that myself, the newer versions of BootStrap actually have an extra patch component on there now, so if your going to require BootStrap from your NPM install, the correct path is actually now

import from 'bootstrap/dist/css/bootstrap.min.css!

if you miss the "dist", webpack will spit the dummy out and not build correctly.

Slightly odd I know, since the css in a view shouldn't be pulled in using web-pack anyway, it should be handled using the AU css loader.

That said, I'm using the dotnet core SPA template Aurelia app by Steve sanderson, the one you get if you do a "dotnet new Aurelia" under dotnet core 2 with the JS services and spa templates packages added.

cheers shawty