Sass @import directive when used in Rails engine can't find assets in plugins

Question

I was building a Rails engine that uses zurb-foundation\'s stylesheets, and kep hitting the same Sass::Syntax error. This seemed strange because I had followed the same pro

Answer 1

Hey guys I solved this problem, it took me like 5 hours to find out how to solve it (sorry about my english, is not my native language).

The normal installation of Foundation in Rails it didn't work for my Engine, so I did it manually:

I added this line to the application.html.erb: <meta name="viewport" content="width=device-width, initial-scale=1.0>

Add this line to your_engine/app/assets/javascripts/your_engine_name/application.js: //= require foundation

And this is how I Solved it:

Add this line to your_engine/app/assets/stylesheets/your_engine_name/application.css (NOTE: I didn't rename to application.scss): *= require your_engine_name/foundation_and_overrides

and also:

For Development, in the lines commented in the Gemfile, says "Declare any dependencies that are still in development here instead of in # your gemspec. These might include edge Rails or gems from your path or # Git. Remember to move these dependencies to your gemspec before releasing # your gem to rubygems.org." So I add the gems that I need, (Foundation, sass, compass, etc)

And tha's all, this is the way that I get my engine working with Foundation,

Answer 2

I found the answer in this Stackoverflow question

The issue is that a Rails engine's dummy app and a regular Rails app have slightly different config/application.rb files.

In a Rails app, you'll see this code towards the top:

if defined?(Bundler)
  # If you precompile assets before deploying to production, use this line
  Bundler.require(*Rails.groups(:assets => %w(development test)))
  # If you want your assets lazily compiled in production, use this line
  # Bundler.require(:default, :assets, Rails.env)
end

But in an engine dummy app, instead you see:

Bundler.require
require "<PLUGIN_NAME>"

In the Rails app, the first Bundler.require include all groups in the Gemfile but excludes :assets unless Rails.env is :development or :test The second Bundler.require includes :default--that is, anything in your Gemfile that's not in a group--as well as :assets and either :production, :development or :test

In a dummy app, none of this is necessary because 1) it's not meant to be used in production, and 2) test and development typically have similar dependency requirements. Since the :assets group is just a convenient way to apply dependencies to :test and :development but not to :production, in a dummy app it's the same as :default. So in a dummy app, nothing but :default is needed. Since Bundler.require is (Warning: Spoiler ahead) the same as Bundler.require(:default), the dummy app just uses Bundler.require. This means that anything in your Gemfile that's in a group will be ignored.

So the problem I had was that I was copy-and-pasting from a Rails app Gemfile into a Rails dummy app Gemfile, including group :assets do.... I removed the group line and everything worked!

ADDED later in the day on 11/29:

To clarify, the error I was seeing is because sass-rails wasn't included (since it was in the :assets group in my Gemfile), so instead of my assets being parsed as Sass, they were parsed as CSS. Since @import means something different to CSS than to Sass, whatever was parsing the CSS file was using a different implementation of @import and couldn't find the file.