javascript - 按模式重命名所有 HTML、CSS 和 JS 中的所有选择器(为选择器添加前缀)

Question

我有一个静态网站:HTML、CSS、JS 文件和无后端 编程。本网站的部分内容将被注入(inject)另一个网站。所以我需要确保我元素中的新 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-网站{
@import("header.scss");
@import("main.scss");
@import("footer.scss");
}

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