通过ant-design-pro-vue版本改过来的项目，唯独主题颜色这个功能失效了，查了两天,代码翻遍了无法解决，求大神给看看

[buildJava]

_tmp_app.txt
_tmp_user.txt

[hzsrc]

官网的ant-design-pro-vue新版本试过了吗？我看解决了一些问题

[hzsrc]

刚拉了最新的看了，是可以的

[buildJava]

刚拉了最新的看了，是可以的
官网的可以的，因为官网的组件很多，太重，公司在这个基础上进行了减化，并且加了一些其他组件进去，从现有项目往上合并时也无法使用主题更新，看到issues里有提到发_tmp debug文件，发上来希望大神能帮忙看下什么原因？

[hzsrc]

之前看了没有看出啥问题。更新下插件的新版本，另外看下是否是另一个类似样式覆盖问题：#15

[buildJava]

之前看了没有看出啥问题。更新下插件的新版本，另外看下是否是另一个类似样式覆盖问题：#15

我debug进到themeColorChanger.js里getCSSString方法始终获取不到样式表，这个的可能原因是什么呢？我偿试对原本项目进行debug发现这里是能获取到样式表的，问题是出现在这里，我想知道这里获取样式表的url是怎么生成的，


这两个位置的url分别是在哪生成的

[buildJava]

清醒了下又发现我这个在启动时压根没找到css？

[iota9star]

@buildJava 你在使用ant-design-pro-vue的时候，是如何操作主题？意思是如何复现这个问题？我最近也在使用ant-design-pro-vue，我修改了一下ant-design-pro-vue的换肤逻辑，在app.vue就初始化了主题(原始项目是在进入登录页以后初始化的主题色)，然后遇到某些组件主题没有生效的问题，我提了这个issue #15 ，原始项目因为是在进入页面以后初始化的主题，样式是没有被异步组件的样式覆盖的，如果你的情况和我的差不多，是因为改了主题初始化的位置，比如像我一样在某些异步组件还没有初始化之前就初始化主题的话，你可以打开浏览器调试界面 elements 看看head标签里面带id的style标签是否是head标签最后一个，如果不是的话，可能是被异步组件的样式给覆盖了。
还有就是，原项目登录页是没有初始化主题的，你在首页改了主题，再次进入登录页是没有效果的

[buildJava]

@iota9star 非常感谢你的回答，不过我的debug时有看到带id的style标签并且是最后一个，在项目启动时ThemeColorReplacer创建这个对象时生成的theme-colors这个样式文件里的样式表是空的，导致我的主题无法切换，但是为什么是空的我没找到原因？

[iota9star]

@buildJava 你在ant-design-pro-vue原始主题操作部分修改了那些地方？

[buildJava]

@iota9star 主题这部分没有修改任何的东西，刚才我对比着两个项目，就在changeSelector这里发现那边比这边多了一个console.log(selector),然后是在css部分去掉了sourceMap:true的配置，然后竟然就行了。。。。，这个配置当时是为了看是哪个样式文件设置的

[iota9star]

@buildJava 好的，能行就OK

[buildJava]

@iota9star 应该就是vue.config.js配置文件在css的配置里

不能有sourceMap:true的配置，否则不生效

[hzsrc]

是sourceMap:true的配置导致的吗？ @buildJava 你用的是哪个版本，是否最新的？如果是的话，加上--theme_debug参数，再把debug文件发上来我再看下？

[ZxcSoft]

你好. 我也有类似 @buildJava 的问题. 也是通过设置vue.config.js中 css不能有sourceMap:true解决的

通过上面的讨论. 我定位到原因为 src\AssetsExtractor.js 文件中

            src = assetToStr(asset);
            writeFileForDebugIf(fn, src, this.extractor)
            var cssSrcs = []
            var CssCodeReg = options.isJsUgly ? Css_Loader_Reg_UGLY : Css_Loader_Reg_DEV;
            src.replace(CssCodeReg, (match, $1) => {
                cssSrcs = cssSrcs.concat(this.extractor.extractColors($1));
            });

主要原因就是Css_Loader_Reg_UGLY和Css_Loader_Reg_DEV正则匹配生成的chunk-vendors.js文件

当sourceMap:true时, 会导入的ant-design-vue less文件. 这里面包含function等. 导致匹配失败

如下附件中:
chunk-vendors.js 未开启sourceMap. 可以正常匹配
_tmp_chunk-vendors.js 开启sourceMap. 在158945行, 导入了ant-design-vue的css.和生成的sourcemap. 就正则匹配不到生成的css了

js.zip

[ZxcSoft]

@hzsrc 请看下是不是需要修改正则或者重写实现方法

[hzsrc]

@ZxcSoft 你好，感谢你提供的测试文件。我用你这个文件_tmp_chunk-vendors.js按下图替换了此webpack-theme-color-replacer项目中的测试文件内容，发现是可以识别出来并有结果输出的。Css_Loader_Reg_UGLY和Css_Loader_Reg_DEV里面有考虑SourceMap的，正常不会拿SourceMap中的内容。可能是由于CssLoader版本不一样所致，近期有修复一个CssLoader版本不一样所致的问题，调整过了正则。你试下更新到最新版本，看是否还有这个问题。

[hzsrc]

另外我又分析了一下这个_tmp_chunk-vendors.js的158945行，发现这一行是同一个文件，但是重复包含了3次，可能是打包过程中做了多次源码映射，在已经映射的基础上再次、再次映射，如附件。请检查是否配置上是否可避免？
source2.txt
source1.txt
source0.txt