Sass::SyntaxError: Undefined mixin 'mixin_name'

问题

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

回答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";

回答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.

回答3:

This sounds like an asset pipeline issue to me. From the Rails docs:

If you want to use multiple Sass files, you should generally use the Sass @import rule instead of these Sprockets directives. Using Sprockets directives all Sass files exist within their own scope, making variables or mixins only available within the document they were defined in.

Are you sure you don't have a sprocket directive somewhere, requiring responsive/webapp (even implicitly in a require_tree)?

The other possibility that comes to mind is that this undefined mixin error may actually be called before it's imported. Are you sure you're not using that mixin somewhere in mega_menu?

来源：https://stackoverflow.com/questions/25994186/sasssyntaxerror-undefined-mixin-mixin-name