CODEWITHSUNDEEP
csssassgulp-sasslibsass
David Vasquez
David Vasquez

Reputation: 1223

What would cause a sass file to break compilation due to a line break?

I have a sass file: sitemap.scss

It contains only the following (for now):

.hero {
    height: 600px;
    background: none;
}

I'm using gulp-sass which has, up until now, compiled my sass perfectly fine.

The output error when compiling this file reads as such:

Error in plugin 'gulp-sass'
Message:
    assets/styles/source/components/sub-pages/sitemap.scss
Error: Invalid CSS after ".hero {": expected "}", was "{"
        on line 1 of assets/styles/source/components/sub-pages/sitemap.scss
>> .hero { {
   -------^

Details:
    formatted: Error: Invalid CSS after ".hero {": expected "}", was "{"
        on line 1 of assets/styles/source/components/sub-pages/sitemap.scss
>> .hero { {
   -------^

    column: 8
    line: 1
    file: /Users/dvasquez/Sites/workspace/Development/branch3/site.com/assets/styles/source/components/sub-pages/sitemap.scss
    status: 1
    messageFormatted: assets/styles/source/components/sub-pages/sitemap.scss
Error: Invalid CSS after ".hero {": expected "}", was "{"
        on line 1 of assets/styles/source/components/sub-pages/sitemap.scss
>> .hero { {
   -------^

    messageOriginal: Invalid CSS after ".hero {": expected "}", was "{"
    relativePath: assets/styles/source/components/sub-pages/sitemap.scss

Now here's where it gets odd. If I take that same sass file, and write it like this:

.hero { height: 600px; background: none; }

It compiles just fine.

I assumed this might be an encoding issue of some sort, so I deleted the file and created a fresh one. Same issue. Has anyone encountered anything like this before? I have many other sass files in my project and none of them exhibit this behavior.

Also, in addition to this, I also tried importing a partial which included the 4-line version of the file and that worked just fine as well.

Any ideas would be greatly appreciated.

Upvotes: 0

Views: 4918

Answers (2)

Abraham Brookes
Abraham Brookes

Reputation: 2007

Laravel Mix

To expand on Grant K Norwood's answer, if you're using Laravel mix, you'll want to pass the indented style in as a property of the third parameter, like so:

mix.sass('input.sass', 'output.css', {
    sassOptions: {
        indentedSyntax: false
    }
});

docs: https://laravel.com/docs/6.x/mix#sass

Upvotes: 0

Grant Norwood
Grant Norwood

Reputation: 23

As mentioned in @rachel's comment above, try setting indentedSyntax: false in your gulp-sass configuration. I had the exact same errors and this worked for me!

"sass": {
  "indentedSyntax": false, //Set to false to allow standard SCSS syntax using braces.
  "includePaths": [
    "./node_modules/normalize.css"
  ]
}

Upvotes: 2

Related Questions