unplugin-vue-cssvars
会从组件开始分析引用的css文件,@vitejs/plugin-vue
的转换代码中进行注入样式unplugin-vue-cssvars
会从组件开始分析引用的css文件,并将其注入到npm i unplugin-vue-cssvars -D
或
yarn add unplugin-vue-cssvars -D
或
pnpm add unplugin-vue-cssvars -D
// vite.config.ts
import { defineConfig } from 'vite'
import { viteVueCSSVars } from 'unplugin-vue-cssvars'
import vue from '@vitejs/plugin-vue'
import type { PluginOption } from 'vite'
export default defineConfig({
plugins: [
vue(),
viteVueCSSVars({
include: [/.vue/],
includeCompile: ['**/**.scss'],
server: false,
}) as PluginOption,
],
})
// rollup.config.js
import { rollupVueCSSVars } from 'unplugin-vue-cssvars'
export default {
plugins: [
rollupVueCSSVars(/* options */),
],
}
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-vue-cssvars').webpackVueCSSVars({ /* options */ }),
],
}
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-vue-cssvars').webpackVueCSSVars({ /* options */ }),
],
},
}
// esbuild.config.js
import { build } from 'esbuild'
import { esbuildVueCSSVars } from 'unplugin-vue-cssvars'
build({
plugins: [esbuildVueCSSVars(/* options */)],
})
v-bind-m
// foo.css
.foo{
color: v-bind-m(fontColor)
}
例如你有以下项目结构:
// App.vue
<template>
<div class="scss">
app
</div>
</template>
<style lang="scss" scoped>
@import '@/assets/scss/mixin';
</style>
那么你可以这样配置
// vite.config.ts
import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteVueCSSVars } from '../dist'
export default defineConfig({
resolve: {
alias: {
'@': resolve(__dirname, './src'),
},
},
plugins: [
vue(),
viteVueCSSVars({
include: [/.vue/],
includeCompile: ['**/**.scss'],
alias: {
'@': resolve(__dirname, './src'),
},
}),
],
})
export interface Options {
/**
* 需要转换的路径,默认是项目根目录
* @default process.cwd()
*/
rootDir?: string
/**
* 需要转换的文件名后缀列表(目前只支持.vue)RegExp or glob
*/
include?: FilterPattern
/**
* 不需要转换的文件名后缀列表(目前只支持.vue)RegExp or glob
*/
exclude?: FilterPattern
/**
* 选择需要处理编译的文件,默认是css
* 例如:如果你想要处理.scss文件,那么你可以传入 ['** /**.sass']
* @property { ['** /**.css', '** /**.less', '** /**.scss', '** /**.sass', '** /**.styl'] }
* @default ['** /**.css']
*/
includeCompile?: Array<string>
/**
* 标记是否为开发服务器使用
* 因为 unplugin-vue-cssvars 在开发服务器上和打包中使用了不同策略,
* vite 中如果不传递它,unplugin-vue-cssvars 将自动识别 config 的 command 来决定 server 值
* @default true
*/
server?: boolean
/**
* 别名
* @default undefined
*/
alias?: Record<string, string>
}
sfc
中,如果 @import
指定了后缀,则根据后缀的文件进行转换分析,否则根据当前 style
标签的 lang
属性(默认 css
)进行转换分析css
中规则:css
文件只能引用 css
文件,只会解析 css
后缀的文件。scss
、less
、stylus
中规则:scss
、less
、stylus
文件可以引用 css
文件、以及对应的 scss
或 less
文件或 stylus
文件,css
文件进行分析script setup
, unplugin-vue-cssvars
会提取所有变量进行匹配。<script setup>
const color = 'red'
</script>
composition api
, unplugin-vue-cssvars
会提取 setup
函数返回变量进行匹配。<script>
import { defineComponent } from 'vue'
export default defineComponent( {
setup(){
const color = 'red'
return {
color
}
}
})
</script>
options api
, unplugin-vue-cssvars
会提取 data
函数返回变量进行匹配。<script>
export default {
data(){
const color = 'red'
return {
color
}
}
}
</script>
script
, unplugin-vue-cssvars
会提取所有变量进行匹配。<script>
const color = 'red'
</script>
sfc
中有 options api
与 composition api
, 所有变量会进行合并options api
,后写 composition api
,以 composition api
优先)优先sfc
中有 script setup
、options api
与 composition api
, 所有变量会进行合并,变量出现冲突以script setup
优先sfc
中普通的 script
,不会与options api
、 composition api
同时存在sfc
中普通的 script
若存在,则必存在script setup
sfc
中普通的 script
与 script setup
所有变量会进行合并,变量出现冲突以script setup
优先sfc
开始,分析 style
标签中引用的 css
文件,按照 css
文件中的引用顺序,深度优先依次提升并注入到 sfc
中。sfc
后,其优先级完全由 @vue/compiler-dom
的编译器决定。