local scoped scss with html
===========================

A webpack loader to add angular2 like scopes to [scss](http://sass-lang.com) and html files.

## Usage:

This is a webpack `preloader`!

```
var webpackConfig = {
  module: {
    loaders: [{
      test: /\.(scss|html)$/, // Files that end with .html or .scss
      loader: 'local-scoped-scss-with-html-loader',
      enforce: "pre"
    }]
  }
};
```

Later loaders will receive valid scss or html streams so there is no need to change the `loaders` config.

## Important!

To use this loader you need to make sure to name the html and scss files using the same basename:
```
|-src
|---app
|-----some-component
|------- some.component.ts
|------- some.component.scss <-- Keep this basename ("some.component") the same as ...
|------- some.component.html  <-- ... this basename!
```

You might now use `ViewEncapsulation.None` in your angular app to keep angular from adding those scopes at runtime.

## Example output

`<h1>Headline!</h1>` in a html-file will be emitted as `<h1 _ngcontent-dmH0X="1">headline!</h1>`.

`h1 { color: blue; }` in a scss-file will be emitted as `h1[_ngcontent-dmH0X] { color: blue; }`.