Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

loadPath as Array - not importing mixins #227

Open
jmatc opened this issue Jul 6, 2016 · 1 comment
Open

loadPath as Array - not importing mixins #227

jmatc opened this issue Jul 6, 2016 · 1 comment

Comments

@jmatc
Copy link

jmatc commented Jul 6, 2016

I'm trying to define a couple .scss files within my loadPath array, and upon compilation, am getting an error that a mixin is undefined:

./grunt/sass.js

'use strict';

module.exports = function() {
  return {
    dist: {
      options: {
        loadPath: [
          'node_modules/[module_name]/modules/mixins.scss',
          'node_modules/[module_name]/modules/helpers.scss'
        ],
        noCache: true,
        sourcemap: 'none',
        style: 'compressed'
      },
      files: {
        'index.css': 'index.scss'
      }
    }
  }
};

index.scss

#app-example-component {
  @include rounded(5px);
}

err

Running "sass:dist" (sass) task
Error: Undefined mixin 'rounded'.
        on line 2 of index.scss, in `rounded'
        from line 2 of index.scss

If this has been answered, sorry for the repeat issue - I couldn't find a similar solution elsewhere.

Thanks in advance.

@codeengie
Copy link

codeengie commented Aug 9, 2016

In your sass.js remove one of the array items and change it to:

'use strict';

module.exports = function() {
  return {
    dist: {
      options: {
        loadPath: [
          'node_modules/[module_name]/modules/'
        ],
        noCache: true,
        sourcemap: 'none',
        style: 'compressed'
      },
      files: {
        'index.css': 'index.scss'
      }
    }
  }
};

Then in your index.scss import both files before your include.

@import 'mixins';
@import 'helpers';

#app-example-component {
  @include rounded(5px);
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants