css - 在 Rails 中如何根据 URL 更改导入的样式

Question

在 Rails 4.2 中，我想从使用“Materialize”设置 View 样式过渡到使用“Material Design Lite”

Materialize 样式要求我在 application.scss 中使用 @import 'materialize'; 而 MDL 样式要求我使用 @import 'material' ; 在同一个文件中。

我的问题是，当我导入 Materialise 样式时，它会破坏 MDL 样式。如果我删除 Materialize 导入语句，MDL 样式将起作用，但我尚未转换为 MDL 样式的任何页面都将完全取消样式。

这是一个太大的应用程序，无法一次性过渡到 MDL。我想在转换过程中使用 MDL 设置一些页面的样式，而其他页面使用 Materialise 设置样式。

有什么方法可以使 application.scss 中的 import 语句以用户正在查看的页面为条件？

Answer 1

我从 application.scss 中删除了 materialize import 语句，然后我在 views/layouts/application.html.erb 中设置了条件，它根据当前设置了一个标志小路。如果当前路径是已转换为 MDL 的路径，则它将 mdl 标志设置为 true。 (目前只有登录页面转换。)

<%
  if current_page?(login_path)
    mdl = true
  else
    mdl = false
  end
%>

然后在页面头部我通过 CDN 导入 Materialize css 和 js 除非页面使用 MDL

<% unless mdl %>
    <!-- Compiled and minified CSS and JS for Materialize -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<% end %>

我认为这样做的后果是 Materialise 不再在 Assets 管道中，这可能会减慢速度，直到过渡完成。

我现在还有两个标题栏的部分，我根据 mdl 标志渲染正确的部分。