I'm looking to implement node-sass-globbing on a new Omega subtheme with the hope that no matter how many sass partials I have in my sass directories (using SMACSS structure), that all will be read and compiled. If anyone can help with what might be missing, I would appreciate it and hopefully this will help out others. For this example, the subtheme will be called 'kylo' (as in the sith jerk)

The Setup:

  • Drupal 7.41
  • Omega 7.x-4.4

Steps

Ideally, this would work on any OS like Windows, Linux, Mac since I use all three of those.

  1. If not installed already, install node.js. The method for this will vary from the website installer to using the CLI on Linux but the outcome should be the same. You want to install it globally. The version my Linux box reports using is v0.12.9
  2. If not installed already, install gulp globally (npm install -g gulp). I'm using 3.9.0, which is the default download as of today (Dec 23, 2015)
  3. cd into the sites/all/themes directory
  4. run drush omega-wizard and select Omega as the base theme, [2] Default as the starterkit.
  5. cd into the new subtheme directory
  6. add node-sass-globbing by running:npm install node-sass-globbing --save-dev. The --save-dev argument will add node-sass-globbing to your package.json file.
  7. open gulpfile.js, in the top vars, add: var importer = require('node-sass-globbing');.
  8. from within the subtheme, run: npm install, which will download the required plug-ins for your Omega subtheme to compile stuff.

All fine and dandy, except no styles. Next, I'll add a partial here:
/sites/all/themes/kylo/sass/base/_colors.scss
with a simple style of a {color: red;} for testing purposes.

Annnnnd this is where things fall apart. I'd ideally like to have as many partials read as necessary, so in my
/sites/all/themes/kylo/sass/kylo.styles.scss, I have the following:
@import "base/*.scss";
With the hopes that it will read any file in the base directory which ends in .scss

But when I run gulp from my subtheme, I get the error:

[19:15:48] Using gulpfile /var/www/drupal7/sites/all/themes/kylo/gulpfile.js
[19:15:48] Starting 'sass:dev'...
[19:15:48] Finished 'sass:dev' after 14 ms
[19:15:48] Starting 'sass:watch'...
[19:15:48] Finished 'sass:watch' after 12 ms
[19:15:48] Starting 'default'...
[19:15:48] Finished 'default' after 4.83 μs
Error in plugin 'sass'
Message:
    sass/kylo.styles.scss
Error: File to import not found or unreadable: base/*.scss
       Parent style sheet: stdin
        on line 5 of stdin
>> @import "base/*.scss";

So, what am I missing? I really don't want to have to list each and every partial file on its own (and this will work, by the way), but would prefer to use a wildcard like you can with Compass. However, since Compass is no longer getting any active development, I'm aiming to embrace Gulp, which is fine but having globbing working would help. Any advice here would be really appreciated. Thanks.

Comments

rajmataj created an issue. See original summary.

rajmataj’s picture

Issue summary: View changes
rajmataj’s picture

Issue summary: View changes