@ciffi-js/webpack-wcs-loader

Webpack WebComponents Style Loader

Usage no npm install needed!

<script type="module">
  import ciffiJsWebpackWcsLoader from 'https://cdn.skypack.dev/@ciffi-js/webpack-wcs-loader';
</script>

README

ciffi-js/webpack-wcs-loader

Webpack WebComponents Style Loader

install as dev dependencies

npm i -D @ciffi-js/webpack-wcs-loader

add to webpack.config.js

{
    test: /\.wcs$/,
    loader: '@ciffi-js/webpack-wcs-loader'
}

options

  • styleOnly: boolean

use

  • create .wcs file that contains scss style
my-custom-element {
  //your styles here
}
  • import in web component javascript file
import { styleTag } from './style.wcs'
  • append style in your render function
render() {
  return this.shadowRoot.innerHTML = (`
    ${styleTag}
    <!-- web component template -->
  `)
}
  • and result is
<my-custom-element>
  <style></style>
  <!-- web component template -->
</my-custom-element>

full documentation available at ciffi.it/ciffi-js