pure-loader

webpack loader for pure

Usage no npm install needed!

<script type="module">
  import pureLoader from 'https://cdn.skypack.dev/pure-loader';
</script>

README

pure-loader npm package

webpack loader for pure

Installation

$ npm i pure-loader

Usage

webpack.config.js

var ExtractTextPlugin = require( 'extract-text-webpack-plugin' );

module.exports = {
    // ...
    entry: './index.js',
    module: {
        loaders: [
            {
                test: /\.rgl$/,
                loader: 'pure'
            }
        ]
    },
    pure: {
        loaders: {
            css: ExtractTextPlugin.extract( 'css' ),
            mcss: ExtractTextPlugin.extract( 'css!mcss' )
        }
    },
    plugins: [
        // ...
        new ExtractTextPlugin( 'app.css' )
    ]
};

app.rgl

<style>
    html {
        background-color: #F2F2F2;
    }
</style>

<style lang="mcss" scoped>
    .outter {
        .inner {
            color: #000;
        }
    }
</style>

<template>
    <div class="outter">
        <div class="inner">RegularJs is Awesome <Button text="get started"></Button></div>
    </div>
</template>

<script>
    import Button from './button.rgl';

    // export options here
    export default {
        // shorthand for registering components in current component scope
        components: {
            'Button': Button,
        }
    }
</script>

Try it out!

Related

Thanks