local scoped scss with pug
A webpack loader to add angular2 like scopes to scss and pug files.
Usage:
This is a webpack preloader!
var webpackConfig = {
module: {
preLoaders: [{
test: /\.(scss|pug)$/, // Files that end with .pug or .scss
loader: 'local-scoped-scss-with-pug'
}]
}
};
Later loaders will receive valid scss or pug streams so there is no need to change the loaders config.
Important!
To use this loader you need to make sure to name the pug 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.pug <-- ... this basename!
Example output
h1 Headline! in a pug-file will be emitted as hq(_ngcontent-dmH0X="1") headline!.
h1 { color: blue; } in a scss-file will be emitted as h1[_ngcontent-dmH0X] { color: blue; }.