目的:动态切换主题样式
思路:根据选中的主题加载对应的css文件
问题:当切换主题样式时怎样才能将上一次引入的css文件移除
试过删除require的缓存delete require.cache[key]
,缓存确实是删了,但样式文件并没有被移除;
目的:动态切换主题样式
思路:根据选中的主题加载对应的css文件
问题:当切换主题样式时怎样才能将上一次引入的css文件移除
试过删除require的缓存delete require.cache[key]
,缓存确实是删了,但样式文件并没有被移除;
在浏览器里,任何加载到网页的东西,在网页关闭之前都无法“移除”。
正常人实现切换主题的方案都是顶层加一个类名等标记,作为命名空间,然后分别写样式,切换这个命名空间就等于切主题了。靠“移除”样式表文件还是头一回听说。
当然,既然 DOM 可以操作,没准 CSSOM 也可以,可以找找相关的 API 。
10 回答11.2k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.7k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.9k 阅读✓ 已解决
4 回答2.5k 阅读✓ 已解决
最终方案,require和import引入的模块无法移除,故采用静态资源引入的方式。
如引入主题样式文件,在webpack配置
CopyWebpackPlugin
插件,将需要引入的模块复制到静态资源目录,然后通过link
标签将文件引入。通过
link
标签实现了动态引入,那自然可以给link标签加上ID,便于匹配替换href
实现切换和移除等功能