🌀 A vue plugin that allows you to use vue3's CSSVars feature in css files
English | 中文
- 🧩 It is a function extension of vue
- 🌈 Compatible with multiple bundled platforms(vite、webpack)
- ⛰ Support css, sass, scss, less, stylus
- ⚡ light and fast
1.When using the development server,
unplugin-vue-cssvars
will analyze the referenced css file from the component,
and inject styles in the transformation code of @vitejs/plugin-vue
2.When building, unplugin-vue-cssvars
will analyze the referenced css file from the component and inject it into
sfc, don't worry about generating redundant code, packaging tools (such as vite) will automatically handle it.
npm i unplugin-vue-cssvars -D
Or
yarn add unplugin-vue-cssvars -D
Or
pnpm add unplugin-vue-cssvars -D
- use plugin and set options
Vite
// 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
// rollup.config.js
import { rollupVueCSSVars } from 'unplugin-vue-cssvars'
export default {
plugins: [
rollupVueCSSVars(/* options */),
],
}
Webpack
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-vue-cssvars').webpackVueCSSVars({ /* options */ }),
],
}
Vue CLI
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-vue-cssvars').webpackVueCSSVars({ /* options */ }),
],
},
}
ESBuild
// esbuild.config.js
import { build } from 'esbuild'
import { esbuildVueCSSVars } from 'unplugin-vue-cssvars'
build({
plugins: [esbuildVueCSSVars(/* options */)],
})
- use
v-bind-m
// foo.css
.foo{
color: v-bind-m(fontColor)
}
- use alias
For example you have the following project structure:
// App.vue
<template>
<div class="scss">
app
</div>
</template>
<style lang="scss" scoped>
@import '@/assets/scss/mixin';
</style>
Then you can configure like this
// 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 {
/**
* Provide path which will be transformed
* @default process.cwd()
*/
rootDir?: string
/**
* RegExp or glob to match files to be transformed
*/
include?: FilterPattern
/**
* RegExp or glob to match files to NOT be transformed
*/
exclude?: FilterPattern
/**
* unplugin-vue-cssvars depends on the vue compiler,
* there may be duplicate css after packaging, here we clear it
*/
revoke?: boolean
/**
* Specify the file to be compiled, for example,
* if you want to compile scss, then you can pass in ['** /**.sass']
* @property { ['** /**.css', '** /**.less', '** /**.scss', '** /**.sass', '** /**.styl'] }
* @default ['** /**.css']
*/
includeCompile?: Array<string>
/**
* Flag whether to start with server at development time,
* because unplugin-vue-cssvars uses different strategies for building and server development
* If it is not passed in vite, unplugin-vue-cssvars will automatically
* recognize the command of config to determine the server value
* @default true
*/
server?: boolean
/**
* alias
* @default undefined
*/
alias?: Record<string, string>
}
- In
sfc
, if@import
specifies a suffix, the conversion analysis will be performed according to the suffix file, otherwise the conversion analysis will be performed according to thelang
attribute of the currentscript
tag (defaultcss
) - Rules in
css
:css
files can only referencecss
files, and only files withcss
suffixes will be parsed. - Rules in
scss
,less
,stylus
:scss
,less
,stylus
files can refer tofiles, and corresponding
scssor
lessfiles or
stylusfiles, Prioritize conversion analysis of files with preprocessor suffixes, if the file does not exist, analyze its
css` file
- For
script setup
,unplugin-vue-cssvars
will extract all variables to match.
<script setup>
const color = 'red'
</script>
- For
composition api
,unplugin-vue-cssvars
will extractsetup
function return variables for matching.
<script>
export default {
setup(){
const color = 'red'
return {
color
}
}
}
</script>
- For
options api
,unplugin-vue-cssvars
will extractdata
function return variables for matching.
<script>
export default {
data(){
const color = 'red'
return {
color
}
}
}
</script>
- For normal
script
,unplugin-vue-cssvars
will extract all variables to match.
<script>
const color = 'red'
</script>
- In sfc, there are options API and composition API, and all variables will be merged. If there are conflicts in variables, the syntax that appears later will take precedence (for example, if options API is written first and composition API is written later, composition API takes precedence).
- There are
script setup
,options api
andcomposition api
insfc
, all variables will be merged, if there is a variable conflict,script setup
will take precedence - Ordinary
script
insfc
will not exist at the same time asoptions api
andcomposition api
- If the normal
script
exists insfc
, there must bescript setup
- Common
script
andscript setup
variables insfc
will be merged, if there is a variable conflict,script setup
will take precedence
- Starting from
sfc
, analyze thecss
files referenced in thestyle
tag, and in accordance with the order of references in thecss
files, they will be promoted in depth-first order and injected intosfc
. - After being injected into
sfc
, its priority is completely determined by the compiler of@vue/compiler-dom
.