modify-loader

2.0.0 • Public • Published

modify-loader

==================

NPM version

LoDash templates loader for webpack. The compiled string returned.

Installation

npm install modify-loader --save-dev

Usage

file.css

body{
    background-color: <%= data.color %>;
}
var options = JSON.stringify({ variable: 'data' });
var value = JSON.stringify({ color: '#000' });
 
var template = require("modify!./file.css?options=" + new Buffer(options).toString('base64') + '&value=' + new Buffer(value).toString('base64'));
// => returns the compiled string with lodash templating method.
console.log(template);
// body{
//     background-color: #000;
// }

Config

This webpack config can load arbitrary text files.

var options = JSON.stringify({ variable: 'data' });
 
module.exports = {
  module: {
    loaders: [
      { test: /\.css$/, loader: "style!css!modify?options=" + new Buffer(options).toString('base64') }
    ]
  }
};

is equivalent to

var template = _.template('body{  background-color: <%= data.color %>;  }', {variable: 'data'})({color: '#000'});

The options is optional, and the same as lodash-template-options The value will be used as interpolated data

Special Case

Since JSON doesn't support regular expression, so it's not possible to pass a RegExp directly, which means for following options, we need workaround for them:

  • escape
  • evaluate
  • interpolate

For solving this issue, we pass Object which contains pattern and attributes as following:

var options = JSON.stringify({
    variable: 'data',
    interpolate: {
        pattern: '%([\\s\\S]+?)%',
        attributes: 'g'
    }
});
 
var value = JSON.stringify({ color: '#000' });
 
module.exports = {
  module: {
    loaders: [
      { test: /\.css$/, loader: "style!css!modify?options=" + new Buffer(options).toString('base64') + '&value=' + new Buffer(value).toString('base64') }
    ]
  }
};

LICENSE

MIT License

Package Sidebar

Install

npm i modify-loader

Weekly Downloads

0

Version

2.0.0

License

MIT

Last publish

Collaborators

  • howard.zuo