esbuild-scoped-css v1.0.7

介绍

一个在esbuild构建下针对React的css隔离插件

如何工作

在当前组件引入以.scoped.(le|c|ss)结尾的文件以生效，编译后会生成data-v-{hash}的属性，标记在每个html节点，同时在css选择器中加入对应散列。

<div class="title" data-v-12345678>title</div>
<p data-v-12345678>paragraph</p>

.title[data-v-12345678] {
	color: #00ffff;
}
p[data-v-12345678] {
	color: #dddddd;
}

选择子组件中的元素

.parent /deep/ .child {
	...;
}

将会编译成

.parent[data-v-12345678] .child {
	...;
}

如何使用

npm i esbuild-scoped-css

// esbuild.js
import esbuild from 'esbuild';
import { cssLoader, scopedIdPlugin } from 'esbuild-scoped-css';

require('esbuild').buildSync({
  entryPoints: ['app.js'],
  bundle: true,
  outdir: 'out',
  plugins: [
	cssLoader,
 	scopedIdPlugin
  ]
})

import './index.scoped.less';

export default function Main() {
	return <div className="title">Hello world</div>;
}

.title {
	color: #00ffff;
}

Gitee

https://gitee.com/mooselee/esbuild-scoped-css.git