パターンによるすべてのHTML、CSSやJSのすべてのセレクタ（セレクタに接頭辞を追加）

Question

は、私は、静的なウェブサイトを持っている名前を変更します。このウェブサイトの一部は別のウェブサイトに挿入されます。だから私は私のプロジェクトからの新しいCSSファイルが古いものを壊さないようにする必要があります。

私がしなければならないことの一つは、そのようなすべてのセレクタ名前を変更することです：

へ

<button class="button"> 

へ

<button class="my-button"> 

と

.button { 
    background: blue; 
} 

を好ましくは

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

から

と

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

GULPまたはpostCSSしかし、他の方法とあまりにも動作します。 GULPプラグインはありますか？これまでのところ、私はCSSのためだけに見つかりました。

ありがとうございました。

Answer 1

これが唯一のCSS部分についてですが、私はあなたのための自動化された方法がとにかくないと思う：

私は別のアプローチを試してみました。あなたの含まれているウェブサイトがコンテナの中に座っていると確信しています。それがiframeの場合は、とにかく衝突する危険はありません。何もする必要はありません。

1. は* .scss

2. は「新しいファイルを作成するために、すべての* .cssファイルの名前を変更します、右の別のHTML文書に含まれている場合、物事が衝突しないことを確認し、次のように進めること

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

：すべてのあなたの名前を変更したcssファイルを（それが正しい順序だことを確認してください）が含まれますincludes.scss」 10

これは、含まれているすべてのファイルをクラスコンテキストに入れて、ルールが含まれているのは.my-websiteコンテナ内の要素にのみ影響します。