Bulma: Importing individual modules not working in gulp-sass

[cossssmin]

Checklist

• [x] This is about the Bulma CSS framework
• [ ] This is about the Bulma Docs
• [x] I'm using Bulma version [0.2.3]
• [x] My browser is: Chrome 55.0.2883.95 (64-bit)
• [x] This is a Sass issue: I'm using gulp-sass version [2.3.1] and node-sass version 3.4.2
• [x] I am sure this issue is not a duplicate?

Description

Trying to use Bulma in Laravel. Laravel uses Elixir, which runs gulp-sass on your Sass files. When wanting to import just a few Bulma modules, gulp-sass fails.

Steps to Reproduce

1. In your .scss file, import all utilities and only the columns, just like the docs say. Note: I have nothing else in that file, just these imports:

@import "./node_modules/bulma/sass/utilities/_all"
@import "./node_modules/bulma/sass/grid/columns"

1. Run gulp. It returns this error (that dashboard.scss file is where I import Bulma):

Error: media query expression must begin with '('
        on line 6 of resources/assets/sass/dashboard.scss
>> "./node_modules/bulma/sass/utilities/_all"
   ------------------------------------------^

Expected behavior

Compiled Bulma with only the utilities and grid columns.

Actual behavior

gulp-sass fails with the error mentioned above.

Further notes

If I import all of Bulma (@import "./node_modules/bulma/bulma.sass"), it works just fine.

If I copy the contents of bulma/bulma.sass and place them in my file that I compile as above, the same error as mentioned is returned.

From my understanding, gulp-sass chokes when a mixin that has a @media query is being used.

Any ideas?

[cossssmin]

And... I'm a retard. Obviously my file needed to be .sass instead of .scss

Funny how it happens that you search a lot and find nothing, then post an issue, search for 2 minutes more and you find the solution.

Sorry for wasting your time :)

[dawnbuie]

Hi @hellocosmin - thanks for figuring that out. I get the same error - however I'm using an existing theme (a Drupal 7, Zen 7.6 subtheme - I set out my issue here: https://www.drupal.org/project/zen/issues/2943632 )

So I have to leave my initial file as .scss

Surely there must be a way to allow a init.scss file to call .sass files? They are supported to be interchangeable syntaxes aren't they?

This is from the gulpfile.js

`gulp.task('watch:css', ['styles'], function() {
  return gulp.watch(options.theme.sass + '**/*.scss', options.gulpWatchOptions, ['styles']);
});

gulp.task('watch:lint-and-styleguide', ['styleguide', 'lint:sass'], function() {
  return gulp.watch([
      options.theme.sass + '**/*.scss',
      options.theme.sass + '**/*.twig'
    ], options.gulpWatchOptions, ['styleguide', 'lint:sass']);
});`

Perhaps there is a way to add support for .sass files as well here?