hzsrc / webpack-theme-color-replacer Goto Github PK

最近调整了页面引入的方式，当时 prod 模式打包时，使用了 externals 进行一些依赖 JS 采用 cdn 加载，而不是直接编译到 chunk-vendors。

现在出现的现象是

本地调试时，不是使用 cdn 资源加载的，不会出现这种情况。下面是正常时候的截图

这是我之后改过的配置项文件
https://github.com/sendya/ant-design-pro-vue/blob/master/vue.config.js

我从 ant design pro 升级到最新版本后，采用了 typescript ，vscode报错提示找不到本插件，发现是没有 .ts 格式的入口文件

var trimReg = /^\s+|[}\s]+$|(?<=,)\s+/g;
这句正则编译时报错，
SyntaxError: Invalid regular expression: /^\s+|[}\s]+$|(?<=,)\s+/: Invalid group
我查了下，是说webpack编译js正则时不支持后行断言。 有办法解决这个么？
我的正则不太好，不知道怎么改

我用的vue cli3，按照教程配置的，不知道为什么报这个错

not support color, like blue, rgb(0,0,0)
and I got #lue, #gb(0,0,0)

我按博主的操作了，但是没有效果，突然看到效果里面有句only for build not dev是只能在打包后看吗，那我想在开发的时候实时查看能吗？麻烦博主教教我

在一些较为特别的场景下，每个模块对应着自己的css 文件，然而这些文件又不能合并成一个写在一起：

  那么这个时候，做动态换肤时，首先在webpack 处理时就存在会生成多个theme-color.css,但是在选完颜色切换时，由于cssUrl 传入的是一个字符串，在getCssText 这个方法只会处理一次，就造成了只会对最后一个theme-color.css 进行换肤，原因是theme_COLOR_config.url 就保存了最后一次生成的url 地址。

  建议：支持一下数组

themeColorchanger.js

// getCssText(cssUrl, setCssTo, resolve, reject)
   if(cssUrl.length){
         cssUrl.forEach((item)=>{
               getCssText(item, setCssTo, resolve, reject)
          })
   }

[HELP] I got the following error while trying to run the project using yarn start

webpack-theme-color-replacer/client in ./src/components/SettingDrawer/themeCol
orClient.js

Then I got a message telling to run the lib using this command below, which I did

npm install --save webpack-theme-color-replacer/client

but I got this message:

$ npm install --save webpack-theme-color-replacer/client
npm ERR! Error while executing:
npm ERR! C:\Program Files\Git\mingw64\bin\git.EXE ls-remote -h -t ssh://[email protected]/webpack-theme-color-replacer/client.git
npm ERR!
npm ERR! [email protected]: Permission denied (publickey).
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR!
npm ERR! exited with error code: 128

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Matheus.Ramos\AppData\Roaming\npm-cache_logs\2020-03-04T20_17_30_680Z-debug.log

Any solution ?

参照你的配置去修改了element-admin的配置，打包出错，想请教下怎么解决

在ThemeColorReplacer的构造函数中fileName的路径可以使用options.fileName,不需要使用固定地址,但好像没有对全局造成影响 @hzsrc

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

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

// 主题1
var1 = '#1';
var2 = '#1';

.header {
  color: var1
}
.footer {
  color: var2
}
// 主题2
var1 = '#1';
var2 = '#2';

.header {
  color: var1
}
.footer {
  color: var2
}

// 切换主题时
replaceCssText 函数从当前样式中提取 CssText 进行匹配替换

假设

oldColors[ #1, #1 ]
newColors[ #1, #2 ]

循环 oldColors 第一次

CssText 匹配 oldColors[ 0 ] = #1 这时候会匹配到两项为 #1 的值
header footer 的 color 都是 #1
进行替换, 替换结果为 newColors[ 0 ] = #1

循环 oldColors 第二次 var1 与 var2 相同

CssText 匹配 oldColors[ 1 ] = #1, 这时候会匹配到两项为 #1 的值
进行替换, 替换结果为 newColors[ 1 ] = #2, 这里会把两项都替换掉
这时候 header footer 是相同的颜色了

cssText.replace(new RegExp(color.replace(/,/, ',\s*'), 'ig'), newColors[t])

这结果并不是预期

两套主题, header footer 分别用不同颜色, 可能会出现如上描述情况

切换主题时会出现这样的情况, 编译首次执行未发现问题

vue打包后的umd.js文件最后有
window.__theme_COLOR_cfg={"url":"css/theme-colors-2ac47ff0.css","colors":["#1890ff","#2f9bff","#46a6ff","#5db1ff","#74bcff","#8cc8ff","#a3d3ff","#badeff","#d1e9ff","#e6f7ff","#bae7ff","#91d5ff","#69c0ff","#40a9ff","#1890ff","#096dd9","#0050b3","#003a8c","#002766","24,144,255"]};

如果第三方项目使用这个umd.js文件，changeColor无法替换颜色，如果把这行注释掉项目就可以替换颜色了，请问是为什么

因为更换主题的话，另外四种情境色也要跟着变，一个一个去写它们的浅色和深色比较麻烦，如果能和主题色一样能自动扩展开就好了

hello,
我发现一个问题，不知道是不是跟我的配置有关，

在勾子emit的时候生成theme-colors.css文件在我的生产环境下有问题，所以我怀疑是不是在生成文件的时机不对，我把emit改成了afterEmit，就好了

如果同时配置了相似的颜色，例如oldColor=['#222', ‘#222223’]；newColor=['#333', ‘#333334’]；
实际结果为【#222】替换为【#333】， 但【#222223】替换成了【#333223】；
初步排除应该是在颜色替换匹配正则时出的问题：

    replaceCssText: function (cssText, oldColors, newColors) {
        oldColors.forEach(function (color, t) {
            cssText = cssText.replace(new RegExp(color.replace(/,/g, ',\\s*'), 'ig'), newColors[t]) // 255, 255,3
        })
        return cssText
    },

因为使用项目打包时，会自动将颜色值压缩成简单形式（如#222222变成#222），所以遇到了这个问题，不知道作者能不能优化下颜色匹配正则？

首先，非常感谢您的贡献。

我这边开发时出现一个问题，在开发环境下颜色替换都能正常运作，但一打包部署生产颜色替换就失效了。
后面发现是vue-cli3 build 时，modern浏览器下会将 rgba 颜色编译为 hsla 色彩模式，导致rgba颜色在生产环境无法替换。

所以问下作者可否增加下 hsla 色彩模式的支持?

hi,
在less 文件存在使用了一些颜色函数处理的颜色值，如下

color: fade(@primary-color, 80%); 

这种应该如何替换？

Does the plugin support stylus file?
Does the plugin support stylus in vue components?

作者你好:
首先感谢提供这么好的插件
我在使用中发现一个问题, matchColors 是一个数组, 如果数组中出现重复的值的时候可能会对程序处理造成影响
我觉得是对比 oldColor 和 newColor 时, 在去处理匹配的样式时会出问题的
相同的色值, 不一定是相同的class, 是否可以使用 obj 键值对, 具名匹配 class 所对应的变量名称呢, 这样的话, 即使是重复的值也能精准对应到样式上

T-T大佬好，我想在ant-design-vue中使用主题切换。看了ant-design-vue-pro的案例，但看不太明白，该如何修改若干个指定的颜色呢
less+modifyVar的做法是这样

less: {
       modifyVars: {
         "@primary-color": "#f8c023",
         "@component-background": "#141414"
     }
}

color-replacer应该怎么写呢。

rag模式虽然文档有说，但是也无效

会报错这个：

UnhandledPromiseRejectionWarning: TypeError: Cannot read property '_isThemeJsInjected' of undefined

引入1.3.4版本后，应该是版本发布了，但是代码没有成功push，或者github内没有1.3.4版本。

This dependency was not found:

* webpack-theme-color-replacer/client in ./src/components/SettingDrawer/themeColorClient.ts

To install it, you can run: npm install --save webpack-theme-color-replacer/client

在使用 cdn 时，时常因为文件名相同而无法获取新的文件内容。是否支持 filename.[hash8].css 的写法来输出文件

ThemeColorReplacer.getElementUISeries没有导出，导致之前安装这个包，使用这个方法的都报错了。

vue-cli4.x报错提示如下(js环境，不是ts)

This dependency was not found:

* webpack-theme-color-replacer/client in ./src/components/SettingDrawer/themeColor.js

To install it, you can run: npm install --save webpack-theme-color-replacer/client

您好，请问我提取文件的时候我设置的rgba(255, 104, 0, .65)不能提取出来？我现在的想法是可不可以加一个参数，让用户可以自定义提取规则

打包正式环境时，支持编译出多个主题色文件，而非动态编译，大佬看看这样能行吗

复现方法，使用vue-cli2 init 一个新项目 webpack3
安装和使用方式同 https://github.com/hzsrc/vue-element-ui-scaffold-webpack4
build出来是ok的，但是run dev就
Extracted theme color css content length: 0
麻烦大佬解答下为啥会出现这种情况，如何操作才能正常使用

问题描述:

使用的是ant-design-pro-vue, 如下颜色写法,在主题切换时无法替换:

第一种写法:(此种写法的颜色,在打包之后,不能随着主题的改变而改变)
box-shadow: 0 0 0 2px color('@{primary-color}30'); 这里这个30表示透明度

.ant-input:focus {
  border-color: #40a9ff;
  outline: 0;
  box-shadow: 0 0 0 2px color('@{primary-color}30');
  border-right-width: 1px !important;
}

第二种写法:(此种写法的颜色,在打包之后,可以随着主题的改变而改变)
box-shadow: 0 0 0 2px color('@{primary-color}');

.ant-input:focus {
  border-color: #40a9ff;
  outline: 0;
  box-shadow: 0 0 0 2px color('@{primary-color}');
  border-right-width: 1px !important;
}

期望结果

第一种写法也能在主题切换时达到,颜色值也可替换

其它说明

使用tyarn run server方式运行时, 第一种写法也是生效的, 但build之后就无效了

项目需求是，在打包的时候直接就能更改颜色，所以能不能在webpack配置里面，加一个配置项，在打包阶段直接就把对应颜色替换完

theme_COLOR_config.colors 的 值 始终不变，导致切换到其他颜色后，切换到默认色直接不更新 css

支持这种吗？externalCssFiles: ['http://xxxx/xxx/index.css']

class ThemeColorReplacer {
constructor(options) {
this.handler = new Handler(options)
}

getBinder(compiler, event) {
    return compiler.hooks
        ? compiler.hooks[event].tapAsync.bind(compiler.hooks[event], 'ThemeColorReplacer')
        : compiler.plugin.bind(compiler, event)
}

apply(compiler) {
    console.log('compiler')
    // this.getBinder(compiler, 'compilation')((compilation) => {
    //   this.getBinder(compilation, 'html-webpack-plugin-before-html-processing')((htmlPluginData, callback) => {
    //     debugger
    //   })
    // });
    this.getBinder(compiler, 'emit')((compilation, callback) => {
        this.handler.handle(compilation)
        callback()
    });
}

}

module.exports = function (colorStr) {
if (colorStr[0] = '#') colorStr = colorStr.slice(1)
var colors = ['#' + colorStr, varyColor.toNum3(colorStr).join(',')]
for (var i = 0; i <= 9; i++)
colors.push(varyColor.lighten(colorStr, Number((i / 10).toFixed(2))));
colors.push(varyColor.rgba(colorStr, 0.1))
colors.push(varyColor.rgba(colorStr, 0.2))
return colors
}

第一行判断应该不是赋值语句而是判断语句使用 === 不然传入的颜色值如果没有#就会有问题
并且传入的字符串如果是常量会报错

_tmp_app.txt
_tmp_user.txt

您好，现在我用的是webpack 3.6.0，用build能生成样式文件。但是用dev运行样式文件在浏览器不能加载。npm run dev 的时候输出这个是成功的theme color css content length: 6223，配置的时候我的filename配置的是/static/css/theme-colors.css；但是在demo里边是好用的。在自己项目就不行

由于项目静态文件跟入口文件是分开部署的造成 css文件无法引用
升级最高版本之后设置injectCss属性无效果
请问这个是设么问题

UI是ant-design-vue

vue-element-admin用的是https://github.com/hzsrc/vue-element-admin
dev模式可以正常切换颜色，production模式切换颜色时会去加载一个错误的路径：http://localhost/undefined

dev模式：

production模式：

您好：如何设置初始主题色

怎么一次性把所有的主题色全构建了？
这个只能在dev环境用？

在webpack构建中设置了

optimization: {
  runtimeChunk: {
    name: (entrypoint) => `runtime-${entrypoint.name}`,
  },
}

打包后代码 window.__theme_COLOR_cfg={"url":"css/theme-colors-60ef0023.css","colors":["#1890ff"]}; 插入到了 runtime-thunk 的代码中，不会在应用运行时加载，导致window变量没有设置

目前临时修改 node_modules 中的源码解决了问题
/webpack-theme-color-replacer/src/Handler.js : 57

if (assetName.slice(-3) === '.js' && assetName.indexOf('manifest.') === -1 && assetName.indexOf('runtime-') === -1) { //
    // ...                  
  }

感谢您的贡献。

最近的一个项目中使用了您的库，发现下面一个问题
rgba 色值模式下，css 动画 translate3d(x,y,z) 、scale3d(x,y,z) ...等，(x，y, z) 可能会被当做rgb色值替换。

希望作者能修复下这个bug，
感谢！:star2: