replaceCssPlugin.js 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. const webpack = require("webpack");
  2. class ReplaceCssPlugin {
  3. constructor(options) {
  4. this.options = options
  5. }
  6. apply(compiler) {
  7. compiler.hooks.emit.tapAsync(
  8. "ReplaceCssPlugin",
  9. (compilation, callback) => {
  10. // 遍历所有编译后的资源
  11. Object.keys(compilation.assets).forEach((filename) => {
  12. if (filename.endsWith(".css")) {
  13. console.log(filename, "222");
  14. // 替换:root 变为:host 支持沙盒不然 element css 不生效
  15. const originalContent = compilation.assets[filename].source();
  16. const replacedContent = originalContent.replace(
  17. /:root\{/g,
  18. ":root,:host{"
  19. );
  20. // 重写资源内容
  21. compilation.assets[filename] = {
  22. source: () => replacedContent,
  23. size: () => replacedContent.length,
  24. };
  25. }
  26. });
  27. callback();
  28. }
  29. );
  30. compiler.hooks.done.tap("compilation", () => {
  31. console.log("compilation");
  32. });
  33. }
  34. }
  35. module.exports = ReplaceCssPlugin;