大佬，请问一下如何保证动态主题的style标签永远在head标签内最后一个呢

[iota9star]

因为是异步组件，异步组件加载以后会新增style标签，然后覆盖之前的动态主题的style标签样式
我想到的办法：

1. 把style标签放到body里面，但不太符合规范
2. 监听head标签dom变化，手动将动态主题style标签移动到最后一位，但有性能问题

[hzsrc]

要保证这个做什么，意义何在？

[iota9star]

呃呃呃，异步加载的组件会产生新的style标签样式，然后就被后面的样式覆盖了，然后样式就不生效了

[hzsrc]

你是说css被覆盖了？这个目前有个方案是在颜色的样式前加一个 body ，通过changeSelector配置

[iota9star]

嗯嗯，异步加载的组件会产生新的style标签，然后覆盖动态主题style标签内的样式。我现在是改了下源码，把head改成body，下面是我的配置


[大佬能给我详细说一下怎么搞吗？我不太能看明白那个怎么用，我用的是ant-design-pro的配置，这个是 配置的地址

[hzsrc]

之前的方案是这样：https://github.com/hzsrc/webpack-theme-color-replacer/blob/master/forElementUI/index.js

思路是把主题色样式的优先级提高，使之不会被覆盖。不过有时候会导致优先级提升过度的问题。
你说的放在body里面，试过确实有效吗，兼容性好不好呢？如果没问题，也不失为一个不错的方案。

[iota9star]

放body里面大多数浏览器都没有问题，但是不符合规范，使用changeSelector已经可以了，多谢大佬

[iota9star]

放body里面大多数浏览器都没有问题，但是不符合规范，使用changeSelector已经可以了，多谢大佬

@hzsrc style标签我后面查了一下，是可以放在body里面的，这样就完全可以保证style标签在最后一个并且不会被新的样式覆盖，但放到body里面并不是特别推荐，这里是文档地址style标签

希望可以加一个配置项可以按照个人选择是放在head还是放在body

[hzsrc]

@iota9star 我测试过了，你说的这个方案比我说的提升优先级的方法好，我已经把插件代码升级了。使用1.3.1版本，会默认附加<style>到body尾部。对于确实需要放到head中的，可以通过一个 appendToEl: 'head'选项来附加到head中。

[iota9star]

@hzsrc 干的漂亮

[hzsrc]

放body下是目前解决优先级问题的最佳方案。你说的问题确实也存在，如果项目没有优先级问题的话，可以通过一个&nbsp;appendToEl: 'head'选项来附加到head中。另外，injectCss: true 这个选项也可以尝试下，或许对你的项目有用。

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "yangdongMC"<[email protected]&gt;; 发送时间: 2020年1月8日(星期三) 下午2:04 收件人: "hzsrc/webpack-theme-color-replacer"<[email protected]&gt;; 抄送: "5953107"<[email protected]&gt;; "Mention"<[email protected]&gt;; 主题: Re: [hzsrc/webpack-theme-color-replacer] 大佬，请问一下如何保证动态主题的style标签永远在head标签内最后一个呢 (#15) append 到body 下面，有个很严重的视觉体验问题，强刷浏览器，颜色过渡替换的那么明显。 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.