Sass::SyntaxError: Undefined mixin 'mixin_name'

Question

I'm working on a Rails 4 project where I'm using Sass and Sass's @import to combine multiple css into one. It works fine but not if I use a new partial for mixins (_mixins.css.scss) and @import this in main.css.scss only and use mixins any other file which is added after that _webapp.css.scss

    @import "bootstrap/bootstrap";
    @import "responsive/mega_menu";
    @import "responsive/mixins";
    @import "responsive/webapp";

Rails Precompilation process is unable to find "responsive/mixins" and gives error in _webapp.css.scss

Sass::SyntaxError: Undefined mixin 'mixin_name'.

here mixin_name is defined in responsive/mixins

Solution 1

If your file is named mixins.css.scss, then you can only import it when it is called as mixins.css, since SASS tries to interpret the @import statement. If there is no extension, SASS expects it to be [filename].scss. You are trying to import [filename].scss while your name is [filename].css.scss. So try:

@import "responsive/mixins.css";

Solution 2

If your stylesheets other than main.css.scss use mixins from your mixin partial then you'll have to import it within those as well. So it looks like you'd need to import mixins in your webapp partial.

Comments

[Jitendra Vyas]

Yes that's the solution I'm using it for now. But that's not the ideal and optimal way to use Sass and mixins

[faustman]

How is it not ideal? Mixins by themselves are not output as CSS. If your webapp partial is reliant on those mixins, then you have to include them. There's no real way around that.