Node-sass: "media query expression must begin with '('" when using multiple @import directives

[trinitroglycerin]

I'm currently trying to use a partial css file in two files: one in a main file (named index.sass) and another in a subsidiary file which is also a partial (_header.sass). Code looks as following

index.sass

@import 'header'
@import 'resetWhitespace'

body
  +resetWhitespace

_resetWhitespace.sass

=resetWhitespace
  margin: 0
  padding: 0

_header.sass

@import 'resetWhitespace'

header
  +resetWhitespace
  // More resets than Katarina
  h1, p, aside
    +resetWhitespace

  display: flex
  flex-direction: column
  box-sizing: border-box
  padding-bottom: 5px
  // TODO: load colours from shared stylesheet (or something like that)
  border-bottom: solid 2px black

  aside
    display: flex
    flex-direction: row
    justify-content: space-between
    align-items: flex-start

When including a second @import rule in index.sass, I receive the following error:

@import 'header'
@import 'resetWhitespace'

body
  +resetWhitespace
               ^
      Media query expression must begin with '('
      in /home/projects/dashboard/styles/index.sass (line 1, column 17)
 @ /dashboard/styles/index.sass 4:14-128

This is through webpack, however the webpack lib uses node-sass as the underlying sass parser.
I'm at a loss as to why this is occurring as I am quite obviously not trying to create a media query.

Any ideas?

[trinitroglycerin]

This appears to be an issue with the SASS loader of sass-loader; setting the syntax to scss works perfectly fine.

[pirelenito]

Hi @danpantry,

I'm having the same issue. What do you mean by setting the syntax?

Thanks in advance!

[pirelenito]

Sorry! I see what you mean. You've just changed your file's syntax to SCSS. :)

My problem was being caused by a missing ; on a file using SCSS syntax.

The file was compiling in 3.3.2 but stopped compiling on 3.4.2.

[pg88]

I have the SCSS syntax, but still having the error,

I'm using "node-sass": "^3.10.1",
Media query expression must begin with '('

The files are with this structure:

sass
--colors.scss
--main.scss
--typography.scss

In the main file I'm doing the @import 'color' and the typography file, but still getting the error.

[stkevintan]

I encountered the same problem some days before.
I consider this is a bug that need to repair since I run 'sass' directly in terminal and get a correct .css output.

finally, I found a temp solution without switching to scss syntax:
__add ; in every @import__

[logic-leoshi]

@stkevintan That is a perfect temp solution.