0.2.0 • Published 6 months ago

@web-baseline/vite-plugin-vue-style-layer v0.2.0

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

Vue style layer (@web-baseline/vite-plugin-vue-style-layer)

✨ 允许 Vue SFC 的 <style> 块设置 CSS 级联层 ✨

License Typescript NPM Download GitHub star

功能

为 Vue 添加新的 SFC 语法,允许通过使用 layer 属性添加 CSS 级联层

Input:

<style layer="pages">
/* <main> style */
main {
  height: 100vh;
}
/* <p> style */
p {
  margin-bottom: 0.2em;
}
</style>

Output:

@layer pages {
  /* <main> style */
  main {
    height: 100vh;
  }
  /* <p> style */
  p {
    margin-bottom: 0.2em;
  }
}

如何使用

安装

npm install @web-baseline/vite-plugin-vue-style-layer

使用

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueStyleLayer from '@web-baseline/vite-plugin-vue-style-layer'
export default defineConfig({
  plugins: [
    vue(),
    VueStyleLayer(),
  ],
});

Options

OptionDescriptionTypeDefault
includes需要被处理的文件RegExp \| ((path: string, id: string) => boolean)/^(?!node_modules[\\/])(?!\.nuxt[\\/])(?!virtual:).*/

已知问题

<style layer="..."> 的 layer 属性变化时无法触发热重载(HMR)。

本人技术力不够,尚且没有找到合适的方式处理,欢迎大佬提 PR,感谢! (๑•̀ㅂ•́)و✧