regular-loader

webpack loader for regularjs

Here is a simple example using regular-loader check it out

Installation

$ npm i regular-loader

Usage

webpack.config.js

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

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

index.js

import App from './app.rgl';
new App().$inject( document.body );

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>

button.rgl

<template>
	<button>{ text }</button>
</template>

<script>
	import Regular from 'regularjs';

	// or export component constructor here
	export default Regular.extend({
		// ...
	});
</script>

Try it out!

Related

• regularjs

Thanks

• vue-loader