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
    },
  };
}
相关推荐
珍宝商店1 分钟前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown2 分钟前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip1 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿2 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.3 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰3 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息3 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
卷Java3 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
gihigo19984 小时前
在CentOS上配置SVN至Web目录的自动同步
前端·svn·centos
珍宝商店4 小时前
优雅的 async/await 错误处理模式指南
开发语言·前端·javascript