bootstrap-sass + gulp: Media query expression must begin with '('

Question

I'm having a problem here with bootstrap-sass. I'm trying to compile bootstrap via Gulp and some other scss libraries in my style.scss file, but it throws me this error:

Message:
    css/dev/style.scss
Error: media query expression must begin with '('
        on line 1 of css/dev/style.scss
>> @import 'breakpoint-slicer'
   ---------------------------^

Details:
    formatted: Error: media query expression must begin with '('
        on line 1 of css/dev/style.scss
>> @import 'breakpoint-slicer'
   ---------------------------^

    column: 28
    line: 1
    file: /home/nano/Sandbox/bolt-seed/theme/own-theme/css/dev/style.scss
    status: 1
    messageFormatted: css/dev/style.scss
Error: media query expression must begin with '('
        on line 1 of css/dev/style.scss
>> @import 'breakpoint-slicer'
   ---------------------------^
messageOriginal: media query expression must begin with '(' relativePath: css/dev/style.scss

I just make a _variables.scss copy on my root styles folder (without changes for now) and i getting the error. Same if i include the breakpoint-slicer in my imports.

Here are my gulp task and my style.scss

gulp task

gulp.task('sass-build', () => {
  return gulp.src('./css/dev/*.scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: [
        './assets/bootstrap-sass/assets',
        './assets/breakpoint-slicer/stylesheets',
      ],
      outputStyle: 'compressed'
    }))
    .pipe(sourcemaps.write('./css'))
    .pipe(gulp.dest('./css'));
});

style.scss:

@import 'breakpoint-slicer'

@import 'variables'
@import 'bootstrap'

body {
  padding: 50px
}

All the assets are managed by Bower in the assets folder. Any idea, or hint about this?

Answer 1

The could be few reasons. One is that the file isn't where you think it is in relation to gulpfile. I've just recreated the issue locally, and unless I had a correct includePaths it wasn't working.

incorrect: (stylesheet.scss)

When I corrected it, files was imported without any problems:

e.g.

.pipe(sass({
    outputStyle: 'nested',
    includePaths: [
        './bower_components/breakpoint-slicer/stylesheets'
    ]
}))

Are you sure the gulpfile is correctly reading that path?

If you are 100% correct that url is fine, then you need to re-visit your sass file - where you include the partial - I've noticed that you don't have semicolons - they are really needed at the end of each import. Put them in and then your code should be fine

no semicolon - failed task

with semicolon - task building just fine: