@import 'X' Media query expression must begin with '(' doesn't make sense for sass file with gatsby

I get the following error when I use gatsby build in my Gatsby project. I wouldn't be so annoyed by it if I had the same problem in another project but the other project runs smoothly with the samse sass syntax. So it can't be a sass problem. It must be something in my package json I think.

Generating development JavaScript bundle failed


@import "bulma"
^
      Media query expression must begin with '('
      in /Users/kristijan/Documents/00_clients/zj_automobile/web_neu_0/src/styles/main.sass (line 2, column 1)

File: src/styles/main.sass

So far I've tried adding semicolons to the imports but that doesn't make sense for sass and after I add them I get this error:

Generating development JavaScript bundle failed

@import "bulma";
               ^
      Invalid CSS after '@import "bulma";': expected 1 selector or at-rule, was "body"
      in /Users/kristijan/Documents/00_clients/zj_automobile/web_neu_0/src/styles/main.sass (line 2, column 17)

File: src/styles/main.sass

failed Building development bundle - 5.061s

My package.json looks like this:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "bulma": "0.9.1",
    "gatsby": "^2.24.91",
    "gatsby-image": "^2.0.20",
    "gatsby-plugin-catch-links": "^2.0.9",
    "gatsby-plugin-google-analytics": "^2.0.8",
    "gatsby-plugin-manifest": "^2.4.37",
    "gatsby-plugin-matomo": "^0.8.3",
    "gatsby-plugin-offline": "3.2.38",
    "gatsby-plugin-preact": "^4.0.16",
    "gatsby-plugin-react-helmet": "^3.0.4",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-robots-txt": "^1.5.3",
    "gatsby-plugin-sass": "^2.3.22",
    "gatsby-plugin-sharp": "^2.6.43",
    "gatsby-plugin-sitemap": "^2.4.17",
    "gatsby-plugin-smoothscroll": "^1.2.0",
    "gatsby-remark-copy-linked-files": "^2.0.7",
    "gatsby-remark-images": "^3.3.40",
    "gatsby-remark-relative-images": "^2.0.2",
    "gatsby-source-filesystem": "^2.3.37",
    "gatsby-transformer-json": "^2.4.15",
    "gatsby-transformer-remark": "^2.8.47",
    "gatsby-transformer-sharp": "^2.5.20",
    "gsap": "^3.5.1",
    "node-sass": "^4.11.0",
    "preact": "^10.5.5",
    "react": "^16.13.0",
    "react-cookie-consent": "^5.2.0",
    "react-dom": "^16.13.0",
    "react-helmet": "^5.2.0",
    "react-hook-form": "^6.10.0",
    "react-slick": "^0.27.12",
    "react-text-loop": "^2.3.0",
    "slick-carousel": "^1.8.1",
    "typeface-montserrat": "^1.1.13"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "forestry:preview": "gatsby develop -p 8080 -H 0.0.0.0",
    "forestry:publish": "gatsby build --prefix-paths",
    "start": "npm run develop",
    "format": "prettier --write \"src/**/*.js\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.15.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  }
}

Does anyone have any idea?