CSS import does not work for bundled modules

[marjan-georgiev]

If a module imports a CSS file, and that module is bundled during the build process, the CSS file will not be imported.

Example:

src/common/components/select.js

import angular from 'angular';

// does not work when the selectModule is bundled
import 'common/components/select.css!';

export var selectModule = angular.module('common.components.select', []);

after gulp build, that module is bundled and ends up into dist/bundles/2-3.js:

System.register("common/components/select", ["angular", "common/components/select.css!"], true, function(require, exports, module) {
  var global = System.global,
      __define = global.define;
  global.define = undefined;
  "use strict";
  var _interopRequire = function(obj) {
    return obj && (obj["default"] || obj);
  };
  var angular = _interopRequire(require("angular"));
  require("common/components/select.css!");
  var selectModule = exports.selectModule = angular.module("common.components.select", []);
  global.define = __define;
  return module.exports;
});

However, the CSS file is not loaded in the browser.

This works for non-bundled modules.

[marjan-georgiev]

A workaround for bundled modules is to use System.import instead of import:

System.import('common/components/select.css!');

[guybedford]

Are you including the full configuration file before the bundle? CSS will load as long as you aren't using bundle-sfx.

[marjan-georgiev]

I believe we are: https://github.com/amcdnl/systemjs-test/blob/master/index.html#L32

[amcdnl]

@guybedford @marjan-georgiev we are including it in our custom bundle script that uses system builder too - https://github.com/amcdnl/systemjs-test/blob/master/gulpfile.js#L252

[guybedford]

Is there a System.register("common/components/select.css!", ...) in the bundle? Also is there a System.register("plugin/css", ...) in the bundle?

You should have just the plugin, and not the css itself defined.

[marjan-georgiev]

There is no System.register("common/components/select.css!") System.register("bower_components/plugin-css/css", ...) is in app/app.js.

Here are the two relevant files after the build: https://gist.github.com/marjan-georgiev/998ab23fa77d8a675f09

[guybedford]

@marjan-georgiev I think this line might be your problem - https://gist.github.com/marjan-georgiev/998ab23fa77d8a675f09#file-app-js-L7.

The CSS file itself is not in the bundle, so you shouldn't include it in the bundles configuration.

[marjan-georgiev]

That was it! Thank you sir!