首先,绝大多数是不会这样做的,除非真的很需要!
再就是,前提是项目得基于vite创建的;
这么做的原因是为了减少整个代码的体积;
思路:通过vite的插件,在运行时将前缀进行更换或者去除
给.uni-前缀换成其他:
// vite-plugin-change-style-prefix.js 这个文件的位置可以与vite.config.js放在同一目录下
import { createFilter } from 'vite';
export function changeStylePrefix() {
const filter = createFilter(/\.(vue|svelte|css)$/i, /node_modules/);
return {
name: 'change-style-prefix', // 必须的,将会显示在 warning 和 error 中
transform(code, id) {
if (filter(id)) {
// 使用正则表达式匹配并替换带有数据属性的SCSS选择器
const transformedCode = code.replace(/\.uni-(\w+)/g, (match, p1) => {
/* TODO 至于是去除还是替换,可以给这个方法传递一个类参数,条件可以从类参里面拿 */
// TODO 更换前缀 多个
return `.wei-qi-${p1}`;
// TODO 去除前缀 多个类名
// return `.${p1}`;
});
// console.log('-------------------', transformedCode)
return {
code: transformedCode,
map: null // 如果可行将提供 source map
};
}
}
};
}
去掉class类名中uni-前缀:
// vite-plugin-change-style-prefix.js
// 这个方法为了去除标签中class类名中的uni-前缀
export function replaceClassNames() {
const filter = createFilter(/\.(vue|js)$/i, /node_modules/);
return {
name: 'replace-class-names', // 插件名称
transform(code, id) {
// 只对.vue或.js文件进行处理
// if (id.endsWith('.vue') || id.endsWith('.js')) {
if (filter(id)) {
/* TODO 至于是去除还是替换,可以给这个方法传递一个类参数,条件可以从类参里面拿 */
// TODO 更换前缀 这种只适合class中只有一个uni-开头的类名
// return code.replace(/class="uni-(.*?)"/g, 'class="wei-qi-$1"');
// TODO 更换前缀 这种适合class中有多个类名 更换的话只要这种就行
return code.replace(/class="\s*([^"]*)"/g, (match, classNames) => {
// Split the class names and filter out 'uni-' prefix
const updatedClassNames = classNames.split(/\s+/).map(className => {
return className.startsWith('uni-') ? className.replace(/\buni-(\w+)/g, 'wei-qi-$1') : className;
}).join(' ');
return `class="${updatedClassNames}"`;
});
// TODO 去除前缀 这种只适合class中只有一个uni-开头的类名
// return code.replace(/class="\s*([^"]*\b)uni-(\w+)(\b[^"]*)"/g, 'class="$1$2$3"');
// TODO 去除前缀 这种适合class中有多个类名 去除的话只要这种就行
// return code.replace(/class="\s*([^"]*)"/g, (match, classNames) => {
// // Split the class names and filter out 'uni-' prefix
// const updatedClassNames = classNames.split(/\s+/).map(className => {
// return className.startsWith('uni-') ? className.substring(4) : className;
// }).join(' ');
// return `class="${updatedClassNames}"`;
// });
}
return code;
},
};
}
使用注意:
使用vite创建uniapp时, 或者说使用uni-ui,肯定会安装import uni from "@dcloudio/vite-plugin-uni";
在vite的插件中,会这样用:自定义的插件方法一定得要放在uni()上面,否则会无效的!
return {
plugins: [
//
changeStylePrefix(), // 上面自定义的插件方法名
replaceClassNames(), // 上面自定义的插件方法名
uni(),
]
}
因为是运行时处理的,所以在更改完vite配置后,要重新运行。