Javascript 在不破坏CSS/JS的情况下将旧静态页面添加到rails应用程序中_Javascript_Html_Css_Ruby On Rails_Subdomain

Javascript 在不破坏CSS/JS的情况下将旧静态页面添加到rails应用程序中

javascript html css ruby-on-rails

Javascript 在不破坏CSS/JS的情况下将旧静态页面添加到rails应用程序中,javascript,html,css,ruby-on-rails,subdomain,Javascript,Html,Css,Ruby On Rails,Subdomain,我正在对一个旧的、静态的网站进行彻底的检修。经过大修的应用程序是使用Rails（4，Ruby 2）构建的。我想在新的应用程序中包括旧的静态站点，并通过访问www.classic.my_site.com或www.my_site.com/classic访问它，但是，旧站点和新站点中使用的许多CSS类/ID名称（CSS和JS都使用）相互重叠，因此，将旧的css和js文件添加到新的应用程序中会完全把事情搞砸将旧站点的文件（只有3个文件：index.html、custom.css、和my_js.js，以

我正在对一个旧的、静态的网站进行彻底的检修。经过大修的应用程序是使用Rails（4，Ruby 2）构建的。我想在新的应用程序中包括旧的静态站点，并通过访问

www.classic.my_site.com

或

www.my_site.com/classic

访问它，但是，旧站点和新站点中使用的许多CSS类/ID名称（CSS和JS都使用）相互重叠，因此，将旧的css和js文件添加到新的应用程序中会完全把事情搞砸

将旧站点的文件（只有3个文件：

index.html

、

custom.css

、和

my_js.js

，以及一些图像）添加到新站点，而不必检查和重命名所有css类和id，最简单的方法是什么

是否有任何理由/惯例将一个URL置于另一个URL之上（

classic.my_site

vs.

my_site.com/classic

）？如果

classic.my_site

是一条路，那么实现这一点的最佳方法是什么

谢谢

免责声明：我可能对此完全不感兴趣，这可能不是最佳做法

因此，Rails 4自动将“sass Rails”gem包含到您的项目中。如果您愿意将文件转换为scss文件，只需创建两个不同的父类：

包含旧样式表的样式表
另一个包含新样式表的样式表

例如：

旧样式表

.old-stylesheet-parent-class {
    //Copy all your old styles in here
    .main-block{
        background: blue;
        font-size: 12px;
    }    
}

新样式表：

.new-stylesheet-parent-class {
    //Copy all your new styles in here
    .main-block{
        background: red;
        font-size: 16px;
    }    
}

您的标记（旧静态页面）：


我的旧页
你好，世界

如果将新旧样式包含在父类中，则这些样式不应再互相践踏。同样，可能有更好的方法可以做到这一点，但这种方法是一种非常快速的解决方案，几乎不需要任何努力

祝你好运！希望这能奏效。

替代解决方案：我想这应该能奏效！根据控制器加载特定的样式表和javascript

我知道您正在使用Rails 4，但这些线程应该会有所帮助

这是一个特定于控制器的样式表

这是特定于控制器的脚本

谢谢，这似乎是可行的，但我不希望看到新的页面。如果我只在旧页面的CSS/HTML中添加一个父类，您认为它会起作用吗？那JS呢？它基本上是一个没有框架的单页应用程序，因此它非常JS密集。很可能不是。因此，如果您只在旧页面的CSS上放置一个父类，它可能会工作，因为父类会为旧样式表类添加更高的优先级。但是，如果新样式表中存在旧样式表中不存在的属性，那么旧类将继承这些属性。为了更好地说明这一点，看看这把小提琴。旧样式表没有“background”属性，但红色是从新样式表继承的。就JS而言，据我所知，没有任何解决办法。嗯，这是有道理的。谢谢

<html>
    <head>
        <title>My Old Page</title>
    </head>
    <body class="old-stylesheet-parent-class">            
        <div class="main-block">
            <p>Hello World!</p>
        </div>
    </body>
</html>