es6-template-string-loader
A Webpack loader that turns text file to an es6 template string
Last updated 4 years ago by shaketbaby .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install es6-template-string-loader 
SYNC missed versions from official npm registry.

Why

I am a fan of the css-modules, but it is not so easy to use it together with Angular.

This loader, together with babel-loader, makes it fairly easy to do that. There are certainly other use cases for this loader too.

Usage

  npm install --save-dev es6-template-string-loader

Add the following to Webpack's config file:

  loaders: [
    { test: /\.css$/, loader: "style!css?modules" },
    { test: /\.html$/, loader: "babel!es6-template-string" }
  ]

In CSS file, foo.css

.foo {
  color: blue;
}

In HTML template, foo.html

  <div class="${this.foo}"></div>

In the JS file that define the directive, foo.js

  import styles from "foo.css";
  import template from "foo.html";

  ngApp.directive("foo", function() {
    return {
      scope: {},
      restrict: 'E',
      template: template(styles)
      controller: function() {

      }
    };
  });

Or, if you don't like to use this, then you can specify a different name by using context parameter

  loaders: [
    { test: /\.css$/, loader: "style!css?modules" },
    { test: /\.html$/, loader: "babel!es6-template-string?context=styles" }
  ]

Then, you would be able to use styles in the HTML template

  <div class="${styles.foo}"></div>

If you use babel 6, make sure to add the required loaders params, like this:

  loaders: [
    { test: /\.css$/, loader: "style!css?modules" },
    { test: /\.html$/, loader: "babel?presets[]=es2015!es6-template-string" }
  ]

Current Tags

  • 2.0.0                                ...           latest (4 years ago)

3 Versions

  • 2.0.0                                ...           4 years ago
  • 1.0.1                                ...           4 years ago
  • 1.0.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 2
Last Month 1
Dependencies (1)
Dev Dependencies (1)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |