color-vars-plugin README
一个 css 变量插件,可以将写入的颜色值,转为项目中的 css 变量。
如何使用
1. 需要在项目的根目录中新增 .autocolorvars.cjs 或 .autocolorvars.js 文件,写入 css 变量的路径
module.exports = {
cssFiles: ['src/assets/style/_vars.scss', 'src/assets/style/_vant.scss']
}
2. 功能
- 在活动侧边栏中,有个窗口会展示出所有 css 变量(相同颜色值的为一组),可以进行颜色搜索

- 鼠标悬浮在变量上,会显示变量的详细描述,点击对应的按钮可以进行颜色替换

双击选中变量,点击按钮进行颜色替换,选择其他颜色则会打开命令面板快速切换 CSS 变量名进行选择

- 快捷键操作
替换颜色快捷键:ctrl+e/command+e
进入变量选择面板:ctrl+t/command+t
- 右键选中替换、选择不同变量替换、一键替换

- 工具栏扩展一键替换
按钮位置在编辑器工具栏

- 支持代码补全
输入 -- 或者 var 可以自动提示变量

手动下载
Artifacts 下载
在 Github Actions 中具体的流水线页面 Artifacts 可以下载构建的压缩包。
cicd 配置文件
- name: Get package version
id: get_version
run: |
VERSION=$(node -p "require('./package.json').version")
echo "version=$VERSION" >> $GITHUB_ENV
- name: Upload VSIX as Artifact
uses: actions/upload-artifact@v4
with:
name: auto-css-vars-${{ env.version }}
path: auto-css-vars-${{ env.version }}.vsix
GitHub Release 下载
- name: Create GitHub Release
id: create_release
uses: actions/create-release@v1
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
tag_name: v0.0.1
release_name: Release 0.0.1
draft: false
prerelease: false
- name: Upload Release Asset
id: upload_release_asset
uses: actions/upload-release-asset@v1
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
upload_url: ${{ steps.create_release.outputs.upload_url }}
asset_path: auto-css-vars-${{ env.version }}.vsix
asset_name: auto-css-vars-${{ env.version }}.vsix
asset_content_type: application/octet-stream
该功能需要在仓库的设置中开启 Workflow permissions ,在 【你的仓库路径】/settings/actions 页面,勾选 Read and write permissions 。
| |