css 文件重复类样式删除

上传文件 进行无关 className 删除
html 复制代码
<div style="display: flex;">
	<input type="file" @change="handleFileUpload" />
	<el-button @click="removeStyles" :disabled="!fileContent">Remove Styles and Download</el-button>
</div>
javascript 复制代码
 handleFileUpload(event) {
   console.log(event)
   const file = event.target.files[0]
   if (file) {
     const reader = new FileReader()
     reader.onload = e => {
       this.fileContent = e.target.result
     }
     reader.readAsText(file)
   }
 },
 removeStyles() {
   if (!this.fileContent) {
     return
   }
   let modifiedContent = this.fileContent
   this.allClassData.forEach(className => {
     const regex = new RegExp(`\\.${className}\\s*{[^}]*}`, 'g')
     modifiedContent = modifiedContent.replace(regex, '')
   })
   const blob = new Blob([modifiedContent], { type: 'text/css' })
   const link = document.createElement('a')
   link.href = URL.createObjectURL(blob)
   link.download = 'text2.scss'
   document.body.appendChild(link)
   link.click()
   document.body.removeChild(link)
 }
获取页面所有className
javascript 复制代码
let allClassNames = getAllClassNames().sort()
this.allClassData = allClassNames
console.log('店铺分析', allClassNames)
javascript 复制代码
export function getAllClassNames() {
  let classNames = new Set()

  function extractClassNames(element) {
    element.classList.forEach(className => {
      classNames.add(className)
    })

    Array.from(element.children).forEach(child => {
      extractClassNames(child)
    })
  }

  extractClassNames(document.body)

  return Array.from(classNames)
}
相关推荐
neter.asia6 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫6 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年26 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_27 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891129 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾30 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking30 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu32 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym37 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫38 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js