html-cssScope-loader

这是一个参考vue-loader，为了解决CSS作用域实现的一个loader,为解决template添加css作用域的loader方案,支持sass,less,css三种解析

参考vue-loader:data-v-xxxxx方案实现，而非css-loader的CSS module方案

目前使用在一些 AngularJS 1.xx 版本 和一些需要innerHTML等动态解析html生产DOM的项目中

采用vue-loader：data-v-xxxxx方案主要是为了解决ng-class等类似 动态渲染的class情况

注意 loader返回的html内容是string类型的html->template,并不是真实的dom元素

Installation

npm install html-css-scope-loader

Examples

Webpack ->rules-> config:

{
	test: /\.html$/,
	use: [{
		loader:'html-css-scope-loader',
		options: {
			minimize: true 		//  = css-loader minimize 
			extendsLoader:[  	// extends loader
				{
					loader: 'px2rem-loader',
					options: {
						remUnit: 100,
						remPrecision: 8
					}
				}
			]
		}
	}]
},

Html tempalte

<!-- 请注意-->
<!-- 由于参考vue-loader实现， 所以html：template !必须存在且只有一个根元素包裹-->
<!-- 并且相关自闭和元素，如img 必须按照<img xxx />方式闭合 不可以<img></img>方式   -->
<div class="watch-center-table fixed-height">
	<table class="account-ctrl-table">
		<tr>
			<th>品牌</th>
			<th>异常扣费</th>
			<th>被封账号</th>
		</tr>
		<tr>
			<!-- <td>自主账号</td> -->
			<td colspan="3" class="title-tr"><p><span>自主账号</span></p></td>
		</tr>
		<tr ng-repeat="item in selfAccountRiskControlData track by $index">
			<td>{{(item.type == 1 ? 21 : item.type) | bikeType}}</td>
			<td>{{item.exceptionCost}}</td>
			<td ng-class="{'redNotice': item.forbidden > 0}">{{item.forbidden}}</td>
		</tr>
		<tr>
			<td colspan="3" class="title-tr"><p><span>共享账号</span></p></td>
		</tr>
		<tr ng-repeat="item in shareAccountRiskControlData track by $index">
			<td>{{(item.type == 1 ? 21 : item.type) | bikeType}}</td>
			<td>{{item.exceptionCost}}</td>
			<td ng-class="{'redNotice': item.forbidden > 0}">{{item.forbidden}}</td>
		</tr>
	</table>
</div>


<!-- 支持@import 'xxxx' | require('xxx')两种方式-->
<!-- 支持scss,less,css 三种类型-->
<style>
	@import '../style/accountCtrl.scss';
	@import '../style/table.scss'
</style>