See Globals; because, reasons.

In the case of jQuery the early practice was to simply attach the jquery object to window:

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

That is what the sample globals configuration will do automatically for you inside the JS bundle that brunch creates. However current practice is to keep everything in a JavaScript module. Then the globals are no longer necessary because jQuery is accessed explicitly through the module mechanism:

const $ = require('jquery'); // CommonJS module - e.g. used inside node.js

import {$,jQuery} from 'jquery'; // ES2015 module syntax

See also ECMAScript 6 modules: the final syntax

However browsers are only now starting to support ES2015 modules on an experimental level. To get the benefit of modules in the browser it has been necessary to use “bundlers” like browserify - and brunch is a bundler.

Now import statements are also used with CSS files because CSS modules try to move beyond the CSS Block Element Modifier naming convention as a means for avoiding naming collisions. These styles are applied inside JavaScript code; but sometimes such an import is simply used to communicate to the bundler that the CSS is being used and needs to be bundled (e.g. Webpack).

It is my impression that mdl never supported CSS modules - that only started to be supported in Material Components for the web - which is why there is a warning that mdl is in limited support.

Brunch can bundle CSS files - but that is simply a matter of configuration to create a bundled app.css file. So I’m not even sure if you are even getting any benefit from the mdl globals configuration or the import statements in connection with your styles. However brunch does need to know where to find the CSS to put into the CSS bundle.

The Brunch fundamentals are covered in The Brunch.io Guide.