sass-variables-inject-loader

"Baggage" loader for webpack

Automatically require any resources related to the required one. See example below.

Documentation: Using loaders.

Install

$ npm i -S baggage-loader

Usage

Imagine that you have project structure like this and you're using webpack:

components/
├── component-1/
│   ├── script.js
│   ├── styles.css
│   └── template.html
├── component-2/
│   ├── script.js
│   └── template.html
└── component-3/
    ├── script.js
    └── styles.css

and in each of component's script.js you're doing something like this:

var template = require('./template.html');
require('./styles.css');
 
var html = template({ foo: 'bar' });

Now you have to stop and give it to baggage-loader, so:

module: {
    preLoaders: [ {
        test: /\/components\/.+script\.js$/,
        // baggage?file=var&file-without-var&…
        loader: 'baggage?template.html=template&styles.css'
    } ]
}

will become the necessary requires with variables declarations if corresponding files exists:

// injected by preloader at the top of script.js
var template = require('./template.html');
require('./styles.css');
 
// your code
var html = template({ foo: 'bar' };

Even more, there are placeholders [dir], [Dir], [file] and [File], so you can use them in various tricky ways both with file and var:

alert/
├── view.js
├── templateAlert.html
└── alertViewStyles.css

loader: 'baggage?template[Dir].html=[file]Template&[dir][File]Styles.css'

var viewTemplate = require('./templateAlert.html');
require('./alertViewStyles.css');