0.0.8 • Published 10 days ago
rollup-plugin-jsx-scoped-css v0.0.8
rollup-plugin-jsx-scoped-css
This is a plugin that can be used in both Rollup and Vite.
Friends who have experience with Vue must be familiar with scoped CSS in Vue's single-file components, but currently, there is no such tool available in React's build tools.
With the official Vue tooling package, you can perfectly utilize all the features supported by Vue scoped CSS.
Demo
// vite.config.js
// import jsxScopedCssPlugin from 'rollup-plugin-jsx-scoped-css'
// or
import { jsxScopedCssPlugin } from 'rollup-plugin-jsx-scoped-css'
export default defineConfig({
plugins: [react(), jsxScopedCssPlugin()]
})
// index.scoped.scss
.page {
background-color: red;
.title {
color: green;
}
.content {
background-color: gray;
// v2
::v-deep {
h1 {
color: blue;
}
p {
color: yellow;
}
a {
color: pink;
}
}
}
:global(p) {
color: red;
}
// v3
:deep(p) {
background-color: black;
}
}
// App.tsx
import 'index.scoped.scss'
const Page = (props) => {
const contentRef = useRef(null)
const textAreaRef = useRef(null)
useEffect(() => {
contentRef.current.innerHTML = `<h1>vue-loader</h1><p>官方文档地址<a href="https://vue-loader.vuejs.org/zh/guide/scoped-css.html">Scoped CSS</a></p>`
}, [])
return (
<div className="page">
<h1 className="title">scoped css</h1>
<div className="content" ref={contentRef}></div>
<div>
<textarea ref={textAreaRef} name="" id="" cols="30" rows="10"></textarea>
</div>
</div>
)
}
Options
export interface jsxScopedCssOptions {
include?: FilterPattern // 包含的文件
exclude?: FilterPattern // 排除的文件
hashPrefix?: string // hash前缀 默认是v
jsxFileExtensions?: string[] // jsx文件后缀 默认是['jsx', 'tsx', 'js', 'ts']
legacyScopedCss?: boolean // 默认使用@vue/compiler-sfc,true则使用 @vue/component-compiler-utils
isScopedCssFile?: (fileName: string) => {} // 判断是不是scoped css文件
}
Documents
- Vue2:https://vue-loader.vuejs.org/zh/guide/scoped-css.html
- Vue3:https://cn.vuejs.org/api/sfc-css-features.html#scoped-css