local scoped scss with html

A webpack loader to add angular2 like scopes to scss 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; }.