按模式重命名所有 HTML、CSS 和 JS 中的所有选择器（为选择器添加前缀）

Question

我有一个静态网站：HTML、CSS、JS 文件和无后端 编程。本网站的部分内容将被注入另一个网站。所以我需要确保我的项目中的新 CSS 文件不会损坏旧的 CSS 文件，反之亦然。

我需要做的一件事是像这样重命名所有选择器：

<button class="button">

到

<button class="my-button">

和

.button {
    background: blue;
}

到

.my-button {
    background: blue;
}

和

$('.button').on('click');

到

$('.my-button).on('click');

最好使用 GULP 或 postCSS，但任何其他方式也可以。有 GULP 插件吗？到目前为止，我只找到了 CSS。

谢谢。

Answer 1

这仅适用于 CSS 部分，但我认为无论如何都没有适合您的自动化方式：

我会尝试不同的方法。我确信您包含的网站将位于容器内。如果它是 iframe，那么无论如何您都没有任何碰撞的危险 - 无需做任何事情。

为确保在其他 HTML 文档中正确包含内容时不会发生冲突，请执行以下操作：

1. 将所有 *.css 文件重命名为 *.scss

2. 创建一个新文件“includes.scss”，其中将包含所有重命名的 css 文件（确保顺序正确）：

   .my-website { @import("header.scss"); @import("main.scss"); @import("footer.scss"); }

这会将所有包含的文件放在类上下文中，因此包含的规则仅影响.my-website 容器内的元素。