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

【问题标题】：Adding an old static page into a rails app without breaking CSS/JS在不破坏 CSS/JS 的情况下将旧的静态页面添加到 rails 应用程序
【发布时间】：2014-04-11 15:41:03
【问题描述】：

我正在对我整理的一个旧的静态网站进行彻底改造。大修后的应用程序正在使用 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 而不是另一个（classic.my_site 与 my_site.com/classic）？如果classic.my_site 是要走的路，那么实现它的最佳方法是什么？

谢谢！

【问题讨论】：

标签： javascript html css ruby-on-rails subdomain

【解决方案1】：

免责声明：我可能完全不同意，这可能不是最佳做法。

因此，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;
    }    
}

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

<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>

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

祝你好运！希望这行得通。

【讨论】：

谢谢，这似乎可行，但我不想让新页面膨胀。如果我只在旧页面的 CSS/HTML 中添加一个父类，你认为它会起作用吗？ JS呢？它基本上是一个没有框架的单页应用程序，所以它是相当 JS 密集型的。
很可能没有。因此，如果您只在旧页面的 CSS 上放置一个父类，它可能会起作用，因为父类会为旧样式表类添加更高的优先级。但是，如果新样式表中存在旧样式表中不存在的属性，则旧类将继承这些属性。为了更好地说明这一点，请查看这个小提琴jsfiddle.net/blibotics/KXDEs。旧样式表没有“背景”属性，但红色是从新样式表继承的。就 JS 而言，据我所知没有解决办法。
嗯，有道理。谢谢

【解决方案2】：

替代解决方案：我认为这应该可以解决问题！根据控制器查看加载特定样式表和 javascript。

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

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

Controller specific stylesheets in rails 3: Inheritence

这是一个特定于控制器的脚本。

Rails 3.1 asset pipeline: how to load controller-specific scripts?

【讨论】：