Changes in imported file does not trigger recompile. about less-rails

[pmuens]

@rstacruz had the same issue. I tried @yeouchien s workaround to rename .less-Files to css.less (mentioned in #41). This helped me to get things working.

[metaskills]

Can you express your situation in a test? We have tests for our @import behavior that is enabled via our ImportProcessor an they are currently passing.

[benvds]

Recompilation is an issue for me too. Or am i missing any notes or docs on this? Not just on imported files.

[bradphelan]

I'm finding the same thing. I have the following setup

I have app/assets/styles/application.css.less with

//= require_self
//= require events

In app/asssets/styles/events.css.less

@import "openkitchen/bootstrap";

In application.rb I have

  config.app_generators.stylesheet_engine :less
  config.less.paths << File.join(Rails.root, 'app', 'assets', 'frameworks')
  config.less.paths << File.join(Rails.root, 'app', 'assets', 'stylesheets', 'frameworks')
  config.less.compress = false

openkitchen/bootstrap.less is under the app/assets/stylesheets/frameworks directory. Within this file

@import "openkitchen/bootstrap-bootstrap";
@import "openkitchen/colors";

where bootstrap-bootstrap is a modifcation of the standard bootstrap.less file with the following changes

// CSS Reset
@import "twitter/bootstrap/reset.less";

// Core variables and mixins
@import "twitter/bootstrap/variables.less"; // Modify this for custom colors, font-sizes, etc
@import "openkitchen/bootstrap-override-variables.less";
@import "twitter/bootstrap/mixins.less";
....

Note the call to bootstrap-override-variables. Anyway to cut a long story short I can't modify bootstrap-override-variables
without stopping the server and deleting everything cached by rails in tmp

rm -rf tmp/*

[metaskills]

No, less-rails is not redundant. The gem exposes quite a few things for anything related to less in rails. That could be exposing a top level config for paths, compression, etc. Also a standard context mixin for sprockets. And most important, the asset helpers like asset_path and asset_uri those that might enjoy in Sass too. Some of these items are critical less-rails-bootstrap too.

[bradphelan]

On Thu, Feb 9, 2012 at 4:38 PM, Ken Collins <
[email protected]

wrote:

No, less-rails is not redundant. The gem exposes quite a few things for
anything related to less in rails. That could be exposing a top level
config for paths, compression, etc. Also a standard context mixin for
sprockets. And most important, the asset helpers like asset_path and
asset_uri those that might enjoy in Sass too. Some of these items are
critical less-rails-bootstrap too.

---

Reply to this email directly or view it on GitHub:
#26 (comment)

Sorry I've totally confused myself debugging this issue. Sorry for that
claim it was redundant. Still I'm trying to figure out why nested @imports
don't load

[bradphelan]

I've figured out the problem. The reload only works for the first level. Imports further down the hierarchy don't get noticed because the less gem itself manages the imports, not less-rails.

Not sure if there is an easy fix for this other than get the less gem to report the entire dependency tree.

[bradphelan]

Ok I've got it working with this fix.

module Less  
  module Rails    
    class ImportProcessor < Tilt::Template

      IMPORT_SCANNER = /@import\s*['"]([^'"]+)['"]\s*;/.freeze

      def prepare
      end

      def depend_on context, data
        import_paths = data.scan(IMPORT_SCANNER).flatten.compact.uniq
        import_paths.each do |path|
          pathname = begin
                       context.resolve(path)
                     rescue Sprockets::FileNotFound
                       nil
                     end

          context.depend_on(path) if pathname && pathname.to_s.ends_with?('.less')

          if pathname
            data = File.read pathname
            depend_on context, data
          end
        end
      end

      def evaluate(context, locals, &block)
        depend_on context, data
        data
      end

    end
  end
end

I recursively process the less files and do the depend_on trick. However it needs an addition to the asset
path instructions. As the context object is part of the asset pipeline you need to add the less paths
to the asset pipeline as well as the less paths so I do

      config.app_generators.stylesheet_engine :less
      paths = [
        File.join(Rails.root, 'app', 'assets', 'frameworks'),
        File.join(Rails.root, 'app', 'assets', 'stylesheets', 'frameworks')
      ]
      paths.each do |p|
        config.assets.paths << p
        config.less.paths << p
      end

So before I make a pull request can anybody comment if this is way off track or not?

[dcalhoun]

I'm dealing with this now as well.

In application.css.less I have:
@import "boostrap/bootstrap"

In bootstrap.less it's importing all the Bootstrap files:
@import "variables.less @import "buttons.less

Updating the @linkColor variable in the variables.less file does not trickle up through the button.less, bootstrap.less and application.css.less files.

[wnstn]

I'm still having an issue with this while using 2.1.6

Editing variables.less to include the asset helpers:

@iconSpritePath: asset-path("glyphicons-halflings.png"); 

is not reflected in the css on reload. The css is still seeking the .png in the original location of "../img/glyphicons-halflings.png", reflecting the issue @dcalhoun had of changes not trickling up through the imports.

[metaskills]

There are a few things wrong here or you are lacking some details that would be helpful to understand where you are coming from. In lieu of that...

Did you precompile assets and are you viewing cached versions? How the heck are you "editing variable.less" and what does that mean? Where is "glyphicons-halflings.png" in your path? It makes a big difference if sprockets even knows how to find it.

[wnstn]

Sorry for the lack of info I'm a bit new to rails and didn't know what to include, here's as much information as I know to give.

less-rails ~> 2.1.6 is required in the gemfile.

I'm using Twitter Bootstrap so the setup is such:

In app/assets/stylesheets/application.css.less I'm requiring Bootstrap:

@import "bootstrap/bootstrap";

Bootstrap, located in lib/less/bootstrap, imports a host of other less files, including:

...
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
...

Within variables.less is a variable to define the path of the sprite sheet used by Bootstrap:

...
@iconSpritePath:       "../img/glyphicons-halflings.png";
...

I need to update @iconSpritePath to be consistent with the asset pipeline directory, so I'm using the helper that is apart of less-rails:

@iconSpritePath:      asset-path("glyphicons-halfings.png");

That variable is called in the file sprites.less (located in the same directory as variables.less ). The issue is, that upon editing @iconSpritePath, reloading the page in the browser does not cause the path to change. It appears that this is because Less is not recompiling the entire chain of imports ( application.css.less < bootstrap.less < sprites.less < variables.less ).

Currently, the less configuration is:

application.rb
   config.less.compress = true

And in answer to your last question, glyphicons-halflings.png is located in lib/assets/images

[metaskills]

Are you aware that your are trying to build (https://github.com/metaskills/less-rails-bootstrap) and in doing so learning what it takes to hook up various load paths and how to work with the underpinnings of the asset pipeline?

Your issue is not with less-rails, but just a learning curve of the asset pipeline in general. Case in point, if a file is in lib/assets/images, did you (a) tell sprockets that that is in your path and (b) likewise tell less-rails via our paths hooks.

BTW, I made less-rails-bootstrap use asset-url for the glyph icons too. But I made sure via the gem that the directory is in both load paths too.

[wnstn]

I may not have been clear, the issue is not that the image cannot be found, it is that on page load, the css contains the original path and not the updated path using the helper.

I'm not sure I can confirm if sprockets is looking in the path or if less-rails is until I can break the CSS, but right now the changes I'm making are not being reflected in the compiled CSS. Here is the output css I get:

background-image: url(../img/glyphicons-halflings.png);
background-position: 14px 14px;

That url path comes from the original bootstrap less file, not the modified version as mentioned above.

[metaskills]

Fair enough. Tell you what tho, the best way forward is to express your issue in a test case. Take a look at the commit I did and read the code there. I have done all the plumbing in the test/dummy_app to mimic all the use cases thus far and even recently one that made sure recursive imports work.

I have even written some very cool test helpers in the basics_spec protected area. It should be easy to duplicate your issue in our test code and show me a diff.

[kirillzubovsky]

I am having the same problem as folks described above, where the gem only watches changes to top level file, but doesn't recognize what happens down the tree.

Is #26 supposed to be fixed or should I implement the work-around manually?

[yelvert]

It looks like others (myself including) are still have this caching issue. See #41

[rstacruz]

I'm still encountering this issue. Rails 4.0.2, less-rails 2.5.0, less 2.5.0.

[hiattp]

+1 @pmuens