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 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi9878381 小时前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课3 小时前
React useEffect 详解与运用
前端·react.js
我想说一句3 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1233 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为