local-scoped-scss-with-pug-loader

webpack (pre-)loader to add angular2 like css scopes in a static way

Usage no npm install needed!

<script type="module">
  import localScopedScssWithPugLoader from 'https://cdn.skypack.dev/local-scoped-scss-with-pug-loader';
</script>

README

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; }.