Using @import

[meleyal]

To share variables/mixins between files with sass you need to use an @import. E.g. in app.scss you might have:

@import 'variables';
@import 'mixins';
@import 'base';
@import 'layout';
...

Is there any way to tell Brunch just to include the app.scss file (the 'manifest') and let sass handle combining the files?

I already tried this in config.coffee:

stylesheets:
  defaultExtension: 'scss'
  joinTo:
    'stylesheets/app.css': /^styles\/app/

[paulmillr]

You can use files with underscore names (_user.scss etc), they wouldn't be compiled.

[meleyal]

Works, thanks!

[meleyal]

Using @import the sass files are not recompiled using brunch watch, any workaround for that?

[paulmillr]

This one is pretty complex issue because brunch compilers need to parse file for imports and detect relations, but 1.1 with brunch/brunch#232 will solve it soon.

[meleyal]

Just tested this with Brunch 1.1.0 but it still seems not to work?
Does the plugin need updating?

[paulmillr]

yep. I hadn't done it though in sass

[meleyal]

Any ETA? Or any pointers on what I should update?

[paulmillr]

sass-brunch needs this function https://github.com/brunch/stylus-brunch/blob/master/src/index.coffee#L26-42 and tests https://github.com/brunch/stylus-brunch/blob/master/test/plugin_test.js#L32. not sure about how @imports look in sass

[meleyal]

How do you run the plugin tests? I get the following error after cloning + running npm test:

TypeError: Cannot read property 'root' of undefined
      at SassCompiler.compile (/Users/meleyal/Development/sass-brunch/lib/index.js:30:74)
      at Context.<anonymous> (/Users/meleyal/Development/sass-brunch/test/plugin_test.js:20:12)
      at Test.run (/Users/meleyal/Development/sass-brunch/node_modules/mocha/lib/runnable.js:143:15)
      at Runner.runTest (/Users/meleyal/Development/sass-brunch/node_modules/mocha/lib/runner.js:272:10)
      at /Users/meleyal/Development/sass-brunch/node_modules/mocha/lib/runner.js:316:12
      at next (/Users/meleyal/Development/sass-brunch/node_modules/mocha/lib/runner.js:199:14)
      at /Users/meleyal/Development/sass-brunch/node_modules/mocha/lib/runner.js:208:7
      at next (/Users/meleyal/Development/sass-brunch/node_modules/mocha/lib/runner.js:157:23)
      at /Users/meleyal/Development/sass-brunch/node_modules/mocha/lib/runner.js:171:7
      at Hook.run (/Users/meleyal/Development/sass-brunch/node_modules/mocha/lib/runnable.js:158:5)
      at next (/Users/meleyal/Development/sass-brunch/node_modules/mocha/lib/runner.js:167:10)
      at Array.0 (/Users/meleyal/Development/sass-brunch/node_modules/mocha/lib/runner.js:176:5)
      at EventEmitter._tickCallback (node.js:192:40)

[paulmillr]

try to change plugin = new Plugin({}); to plugin = new Plugin({paths: {root: ''}}); in plugin test

[meleyal]

Hm, I made a start here, but I couldn't get the assets to recompile when I included it in my project:
https://github.com/meleyal/sass-brunch/tree/deps

[paulmillr]

@meleyal this is a brunch bug. Just fixed in aeed373236b015db9e44a1cb272e216764146048.

[nicohvi]

Hi, sorry to review such an old issue @paulmillr , but is it still necessary to prefix all the sass files except the manifest with an underscore? (if I want to share the variables etc. between all files)

Thanks for a great library :-)

[paulmillr]

yes

[nicohvi]

Alrighty, cheers 👍