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
    },
  };
}
相关推荐
用户21411832636021 分钟前
01-开源版COZE-字节 Coze Studio 重磅开源!保姆级本地安装教程,手把手带你体验
前端
大模型真好玩15 分钟前
深入浅出LangChain AI Agent智能体开发教程(四)—LangChain记忆存储与多轮对话机器人搭建
前端·人工智能·python
帅夫帅夫39 分钟前
深入理解 JWT:结构、原理与安全隐患全解析
前端
Struggler2811 小时前
google插件开发:如何开启特定标签页的sidePanel
前端
爱编程的喵1 小时前
深入理解JSX:从语法糖到React的魔法转换
前端·react.js
代码的余温1 小时前
CSS3文本阴影特效全攻略
前端·css·css3
AlenLi1 小时前
JavaScript - 策略模式在开发中的应用
前端
xptwop1 小时前
05-ES6
前端·javascript·es6
每天开心1 小时前
告别样式冲突:CSS 模块化实战
前端·css·代码规范
wxjlkh1 小时前
powershell 批量测试ip 端口 脚本
java·服务器·前端