vite配置一个css插件

vite.config.js的plugins执行函数

该例子只是替换一些css,具体内容不重要,主要看形参的运用

复制代码
// vite-plugin-css.js
export default function cssPlugin() {
  return {
    name: 'vite-plugin-css-post', // 插件的名字,Vite 插件必须有名字
    enforce: 'post', // 设定插件执行的时机,pre 表示在 Vite 的 CSS 预处理之前
    transform(css, id) {
      if (id.endsWith('.css')) {
        // 在这里处理 CSS 文件内容
        console.log('======文件post', id);
        css = css.replace(/\*:not\([^\)]+\),.*?::file-selector-button/g, function (res) {
          return '*'
        });


        css = css.replace(/:not\(#[^\)].*?\)/g, function (res, a) {
          return ''
        });
        return {
          code: css, // 返回处理后的 CSS 内容
          map: null, // 如果需要支持 sourcemaps,可以返回 sourcemap 数据
        };
      }

      return null; // 如果文件不是 .css 文件,返回 null
    },
  };
}
相关推荐
F2E_Zhangmo17 分钟前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户214118326360233 分钟前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
Zacks_xdc1 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|1 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
张迅之2 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦3 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro4 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹4 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风4 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱4 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript