in Rails how do I change what styles are imported based on the URL

Question

In Rails 4.2 I want to transition from using "Materialize" to style the views to using "Material Design Lite"

The Materialize styles require me to have @import 'materialize'; in application.scss and the MDL styles require me to have @import 'material'; in the same file.

My problem is that when I import the Materialize styles it breaks the MDL ones. If I remove the Materialize import statement the MDL styles work, but any page that I haven't transitioned to MDL styles is then completely unstyled.

It's too big an app to make the transition to MDL in one go. I want to have some pages styled with MDL while others are styled with Materialize during the transition process.

Is there any way of of making the import statement in application.scss conditional on which page the user is viewing?

score 0 · Answer 1 · answered Mar 03 '17 at 11:26

I removed the materialize import statement from application.scss then I set up conditionals inside views/layouts/application.html.erb which sets a flag based on the current path. If the current path is one that has been transitioned to MDL then it sets the mdl flag to be true. (Currently only the login page is transitioned.)

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

Then in the page head I import the Materialize css and js through CDN unless the page is using 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 %>

I think the consequence of this would be that Materialize is no longer in the asset pipeline, which may slow things down a little until the transition is done.

I also now have two partials for the header bar and I render the correct one based on the mdl flag.

in Rails how do I change what styles are imported based on the URL

1 Answers1