目前正在使用 ViteJs 构建 React 项目,该项目使用 TailwindCSS 和 PostCSS。
我希望在生产版本中混淆顺风类名。喜欢object-cover
to a2
。另外,我的目标不是缩小。
我尝试寻找解决方案,但没有运气。
这是 postcss 配置:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
使用以下代码我设法替换了类名only in the css file
,我也找不到在javascript中替换它的方法,希望尽快找到一些解决方案。
vite.config.js
import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import {createHtmlPlugin} from "vite-plugin-html";
import postcssRename from "postcss-rename";
import tailwindcss from "tailwindcss";
export default async ({mode}) => {
return defineConfig({
plugins: [
react(),
createHtmlPlugin({
minify: true,
}),
],
css: {
postcss: {
plugins: [
tailwindcss(('./tailwind.config.cjs')),
postcssRename({
strategy: (input)=>{
return random(6)
},
outputMapCallback: function (map) {
console.log(JSON.stringify(map));
}
})
]
}
},
server: {
host: '0.0.0.0',
port: 9000
}
});
};
function random(length) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)